Dialog
A modal window layered over the page for focused tasks or confirmations. Built on Base UI's dialog primitive.
Last updated January 1, 1980
CreditsModifiedPublished
Copied from shadcn/ui.
- DialogTrigger measures the ambient direction where it renders and passes it to the portaled DialogViewport, so Persian content and logical spacing render correctly even when the dialog is opened from an RTL-only section of an otherwise-LTR page
- Centers via a CSS grid viewport (grid-rows-[1fr_auto_3fr] with justify-items-center) instead of the usual top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 trick, which sidesteps that trick's RTL bug entirely rather than needing a rtl: correction
- Adds a DialogPanel that scrolls independently inside a fixed-height popup, so a tall form doesn't push the header/footer off-screen
Overview
Installation
Usage
import {
Dialog,
DialogClose,
DialogDescription,
DialogFooter,
DialogHeader,
DialogPanel,
DialogPopup,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"
export function Example() {
return (
<Dialog>
<DialogTrigger render={<Button variant="outline">Open</Button>} />
<DialogPopup>
<DialogHeader>
<DialogTitle>Edit profile</DialogTitle>
<DialogDescription>
Make changes to your profile here.
</DialogDescription>
</DialogHeader>
<DialogPanel>{/* form fields */}</DialogPanel>
<DialogFooter>
<Button type="submit">Save changes</Button>
<DialogClose render={<Button variant="outline">Cancel</Button>} />
</DialogFooter>
</DialogPopup>
</Dialog>
)
}Examples
No footer
DialogFooter is just another child — skip it for purely informational dialogs that don't need a confirm/cancel pair.
RTL
API Reference
Dialog
API reference: Base UI Dialog .