<Dialog>
<Button>
<PenSquareIcon /> Create issue
</Button>
<Overlay>
<DialogContent>
<DialogHeader>
<DialogHeading>Create a new issue</DialogHeading>
<DialogDescription>Report an issue or create a feature request.</DialogDescription>
</DialogHeader>
<DialogBody>
<TextField aria-label="Title" autoFocus>
<Input placeholder="Title" className="w-full" />
</TextField>
<TextField aria-label="Title" autoFocus>
<TextArea aria-label="Description" placeholder="description" className="w-full" />
</TextField>
</DialogBody>
<DialogFooter>
<Button slot="close">Cancel</Button>
<Button slot="close" variant="primary">
Save changes
</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,
DialogHeading,
} from "@/components/ui/dialog";
import { Overlay } from "@/components/ui/overlay";<Dialog>
<Button>Open dialog</Button>
<Overlay>
<DialogContent>
<DialogHeader>
<DialogHeading>Dialog Title</DialogHeading>
<DialogDescription>Dialog description</DialogDescription>
</DialogHeader>
<DialogBody>Content</DialogBody>
<DialogFooter>
<Button slot="close">Close</Button>
</DialogFooter>
</DialogContent>
</Overlay>
</Dialog>Use the controls below to experiment with different dialog props and see the live preview and code update.
<Dialog>
<Button>Open Dialog</Button>
<Overlay>
<DialogContent>
<DialogHeader>
<DialogHeading>Dialog Title</DialogHeading>
<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>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 | |
|---|---|---|---|
DOMRenderFunction<any, any> | — | ||
union | — | ||
string | — | ||
Missing description.
Supports all div attributes.
Missing description.
Supports all footer attributes.
Last updated on 1/14/2026
Bringing singularity to the web.
Built with passion by @mehdibha.