<!-- source-hash: 1007936b4fa31192c76c72547575559a -->
Accessible modal dialog component built on Radix UI's `DialogPrimitive`, providing a fully composed set of dialog sub-components with enter/exit animations, backdrop blur overlay, and a built-in close button.

## Key Components

| Export | Description |
|--------|-------------|
| `Dialog` | Root component managing open/close state |
| `DialogTrigger` | Element that opens the dialog on interaction |
| `DialogContent` | Main modal container; renders via `DialogPortal` with overlay, animations, and a close (`X`) button |
| `DialogOverlay` | Fixed full-screen backdrop with blur and fade animations |
| `DialogHeader` | Layout wrapper for title/description area |
| `DialogFooter` | Layout wrapper for action buttons (reverses column order on mobile) |
| `DialogTitle` | Semibold heading with accessible binding |
| `DialogDescription` | Muted secondary text beneath the title |
| `DialogClose` | Primitive close button for custom trigger placement |
| `DialogPortal` | Renders dialog outside the DOM tree via a portal |

## Usage Example

```typescript
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
} from "@/components/ui/dialog"

export function ConfirmDialog() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <button>Open Dialog</button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Confirm Action</DialogTitle>
          <DialogDescription>
            This action cannot be undone. Are you sure?
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose asChild>
            <button>Cancel</button>
          </DialogClose>
          <button onClick={() => console.log("confirmed")}>Confirm</button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
```

> `DialogContent` automatically injects `DialogOverlay` and the close (`X`) button — no need to add them manually. Use `DialogClose` only for custom close triggers within the footer or body.