## [Pattern Name]

**Type:** Project Pattern | Migration Artifact | Promoted Pattern
**Added:** YYYY-MM-DD
**Status:** Active | Deprecated | Proposed
**Related Components:** [Component list]

### Description
What the pattern does and why it exists.

### When to Use
Specific scenarios where this pattern applies.

### When NOT to Use
Anti-patterns or cases to avoid.

### Implementation

\`\`\`typescript
// Code example
\`\`\`

### Accessibility Notes
WCAG compliance, keyboard navigation, screen reader support.

### Variants
Any supported variations or combinations.

### Migration Notes
If derived from legacy code, document what changed and why.

// BEFORE (MUI)
import Button from '@mui/material/Button'

<Button variant="contained" color="primary" size="large">
  Submit
</Button>

// AFTER (shadcn/ui)
import { Button } from "@/components/ui/button"

<Button variant="default" size="lg">
  Submit
</Button>

// BEFORE (Chakra)
import { Button } from '@chakra-ui/react'

<Button colorScheme="blue" size="lg" isLoading>
  Submit
</Button>

// AFTER (shadcn/ui)
import { Button } from "@/components/ui/button"
import { Loader2 } from "lucide-react"

<Button size="lg" disabled>
  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
  Submit
</Button>

// BEFORE (MUI)
import TextField from '@mui/material/TextField'

<TextField
  label="Email"
  type="email"
  error={!!errors.email}
  helperText={errors.email?.message}
/>

// AFTER (shadcn/ui)
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

<div className="space-y-2">
  <Label htmlFor="email">Email</Label>
  <Input
    id="email"
    type="email"
    {...register("email")}
    aria-invalid={!!errors.email}
  />
  {errors.email && (
    <p className="text-sm text-destructive">{errors.email.message}</p>
  )}
</div>

// Or with Form component
<FormField
  control={form.control}
  name="email"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Email</FormLabel>
      <FormControl>
        <Input type="email" {...field} />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>

// BEFORE (MUI)
import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material'

<Dialog open={open} onClose={handleClose}>
  <DialogTitle>Confirm</DialogTitle>
  <DialogContent>Are you sure?</DialogContent>
  <DialogActions>
    <Button onClick={handleClose}>Cancel</Button>
    <Button onClick={handleConfirm}>Confirm</Button>
  </DialogActions>
</Dialog>

// AFTER (shadcn/ui)
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"

<Dialog open={open} onOpenChange={setOpen}>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Confirm</DialogTitle>
      <DialogDescription>Are you sure?</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button variant="outline" onClick={() => setOpen(false)}>
        Cancel
      </Button>
      <Button onClick={handleConfirm}>Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

<!-- BEFORE (Bootstrap) -->
<div class="card">
  <div class="card-header">Featured</div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

// AFTER (shadcn/ui)
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Button } from "@/components/ui/button"

<Card>
  <CardHeader>
    <CardTitle>Card title</CardTitle>
    <CardDescription>Featured</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Some quick example text.</p>
  </CardContent>
  <CardFooter>
    <Button>Go somewhere</Button>
  </CardFooter>
</Card>

// BEFORE (Chakra)
import { Alert, AlertIcon, AlertTitle, AlertDescription } from '@chakra-ui/react'

<Alert status="error">
  <AlertIcon />
  <AlertTitle>Error!</AlertTitle>
  <AlertDescription>Something went wrong.</AlertDescription>
</Alert>

// AFTER (shadcn/ui)
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { AlertCircle } from "lucide-react"

<Alert variant="destructive">
  <AlertCircle className="h-4 w-4" />
  <AlertTitle>Error!</AlertTitle>
  <AlertDescription>Something went wrong.</AlertDescription>
</Alert>

# Remove old framework
npm uninstall @mui/material @emotion/react @emotion/styled
# or
npm uninstall @chakra-ui/react @emotion/react @emotion/styled
# or
npm uninstall bootstrap

# Add shadcn/ui dependencies (done by init)
npm install class-variance-authority clsx tailwind-merge
npm install @radix-ui/react-dialog @radix-ui/react-slot # etc.