Dialog
Modal dialog with overlay, built on Radix UI Dialog
Structure
Dialog wraps the entire component and manages open/closed state
DialogTrigger opens the dialog when clicked
DialogContent is the modal panel with overlay
DialogHeader / DialogBody / DialogFooter structure the content
Components
Prop
Type
Usage
import {
Dialog,
DialogContent,
DialogHeader,
DialogBody,
DialogFooter,
DialogTitle,
DialogDescription,
DialogTrigger,
} from "@/components/ui/dialog"
<Dialog>
<DialogTrigger asChild>
<Button>Open Dialog</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Edit Profile</DialogTitle>
<DialogDescription>
Make changes to your profile here.
</DialogDescription>
</DialogHeader>
<DialogBody>
<div className="space-y-4">
<div className="space-y-2">
<Label htmlFor="name">Name</Label>
<Input id="name" defaultValue="John Doe" />
</div>
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input id="email" defaultValue="john@example.com" />
</div>
</div>
</DialogBody>
<DialogFooter>
<Button variant="outline">Cancel</Button>
<Button>Save changes</Button>
</DialogFooter>
</DialogContent>
</Dialog>Install
npx shadcn add @bonsai/dialog