Browse components
Dialog
Modal built on the native <dialog>: blurred backdrop, spring scale-in and fade-out, Escape to close and focus returned to the trigger.
Installation
npx shadcn@latest add @glint-ui/dialogFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/dialog.json
Usage
import { Dialog } from "@/components/ui/dialog";
<Dialog>
<DialogTrigger>Edit profile</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Edit profile</DialogTitle>
<DialogDescription>Changes are visible to your team.</DialogDescription>
</DialogHeader>
{/* form fields */}
<DialogFooter>
<DialogClose>Cancel</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultOpen | boolean | false | Initial open state when uncontrolled. |
| open | ReactNode | — | Controlled open state. |
| onOpenChange | ReactNode | — | Called with the next open state. |
| position | "fixed" | "absolute" | "fixed" | fixed = true modal via showModal(); absolute = contained in the nearest positioned parent. |
| children | ReactNode | — | DialogTrigger and DialogContent (with DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose). |
| className | string | — | Extra classes for the root element. |