Dialog
A modal window that overlays the page for focused interactions.
Preview
Installation
Usage
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"<Dialog>
<DialogTrigger>Open Dialog</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Dialog Title</DialogTitle>
<DialogDescription>Dialog Description</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button>Save</Button>
</DialogFooter>
</DialogContent>
</Dialog>API Reference
Dialog
Root component. Alias for Dialog.Root from Base UI.
DialogTrigger
Trigger button that opens the dialog. Alias for Dialog.Trigger from Base UI.
DialogContent
Popup container that displays the dialog content. Wraps Dialog.Portal, Dialog.Backdrop, and Dialog.Popup.
DialogHeader
Container for the dialog title and description.
DialogFooter
Footer section for action buttons. Includes a built-in close button by default.
DialogTitle
Title component. Alias for Dialog.Title from Base UI.
DialogDescription
Description component. Alias for Dialog.Description from Base UI.
DialogClose
Close button component. Alias for Dialog.Close from Base UI.
DialogPortal
Portal component for rendering outside the DOM hierarchy. Alias for Dialog.Portal from Base UI.
DialogOverlay
Backdrop/overlay component. Alias for Dialog.Backdrop from Base UI.