<Dialog>
<Button>Open Dialog</Button>
<Overlay>
<DialogContent>
<DialogHeader>
<DialogTitle>Dialog Title</DialogTitle>
<DialogDescription>This is a dialog description.</DialogDescription>
</DialogHeader>
<DialogBody>
<p>Dialog content goes here.</p>
</DialogBody>
<DialogFooter>
<Button slot="close">Cancel</Button>
<Button slot="close" variant="primary">
Confirm
</Button>
</DialogFooter>
</DialogContent>
</Overlay>
</Dialog>npx shadcn@latest add @dotui/dialogUse dialog to grab the user's attention for critical tasks, like confirming actions, providing additional details, or capturing input.
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogBody,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Overlay } from "@/components/ui/overlay";<Dialog>
<Button>Open dialog</Button>
<Overlay>
<DialogContent>
<DialogHeader>
<DialogTitle>Dialog Title</DialogTitle>
<DialogDescription>Dialog description</DialogDescription>
</DialogHeader>
<DialogBody>Content</DialogBody>
<DialogFooter>
<Button slot="close">Close</Button>
</DialogFooter>
</DialogContent>
</Overlay>
</Dialog>A DialogTrigger opens a dialog when a trigger element is pressed.
| Prop | Type | Default | |
|---|---|---|---|
A dialog is an overlay shown above other content in an application.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
DOMRenderFunction<"section", undefined> | — | ||
Missing description.
Supports all header attributes.
Missing description.
| Prop | Type | Default | |
|---|---|---|---|
union | — | ||
string | — | ||
DOMRenderFunction<"h1", undefined> | — | ||
Missing description.
| Prop | Type | Default | |
|---|---|---|---|
union | — | ||
string | — | ||
DOMRenderFunction<any, any> | — | ||
Missing description.
Supports all footer attributes.
Last updated on 6/4/2026