# Dialog (/docs/dialog)

A focus-trapped Base UI modal with asymmetric enter and exit motion and optional phased content.

## Install

```bash
npx shadcn@latest add https://4af.selfsimilar.dev/r/dialog.json
```

## Usage

```tsx
import {
  Dialog,
  DialogContent,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

<Dialog>
  <DialogTrigger>Open dialog</DialogTrigger>
  <DialogContent>
    <DialogTitle>Edit project</DialogTitle>
    Project settings
  </DialogContent>
</Dialog>
```

## API

**Main exports:** `Dialog`, `DialogTrigger`, `DialogClose`, and its content, title, and footer
parts; `DialogSteps`, `DialogStep`, and `DialogPortalContainer`

A centred modal with enter and exit motion and an optional validated multi-step flow.

## Notes

Base UI handles focus trapping, dismissal, scroll locking, and labelling. `DialogContent`
accepts `portalContainer` for a mount point of your own and `backdropClassName` for extra
backdrop styling. `DialogSteps` animates between steps of different sizes. Its final **Done**
button closes the dialog after optional validation; it does not save data or submit a form.