Components
Dialog
A window overlaid on the primary window or another dialog, rendering the content underneath inert. Use it for focused tasks and confirmations.
Preview
Live and interactive: open it, then toggle the theme. The surface, border, footer tint, and overlay all remap from Cognition tokens, no dark: classes. Focus is trapped and Esc closes it.
API
<Dialog>
<DialogTrigger asChild>
<Button>Edit profile</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Edit profile</DialogTitle>
<DialogDescription>Make changes here.</DialogDescription>
</DialogHeader>
{/* Body: wrap in px-4 pb-4 */}
<div className="px-4 pb-4">{/* fields */}</div>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button>Save changes</Button>
</DialogFooter>
</DialogContent>
</Dialog>DialogHeader and DialogFooter own their padding: the footer is full-bleed with a top border and subtle tint. Body content sits between them, wrapped in px-4 pb-4.
Examples
Form: inputs with a Cancel / Save footer.
Long content: the body scrolls, header and footer stay pinned.
Don't and Do
Don't build a modal from a raw fixed div with a bg-black/50 overlay and manual state: you'll lose focus trapping, scroll lock, and Esc handling.
// Close from inside with DialogClose: no manual open state
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button onClick={save}>Save</Button>
</DialogFooter>import {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogFooter,
DialogClose,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
export function ConfirmDialog() {
return (
<Dialog>
<DialogTrigger asChild>
<Button>Open</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you sure?</DialogTitle>
<DialogDescription>This can't be undone.</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button>Confirm</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}Focus management, scroll lock, and Esc / overlay-click dismissal come for free. Cognition tokens are baked in.