For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
After adding the component with the CLI, import the required parts:
import { Button } from "@/components/ui/button"import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger,} from "@/components/ui/dialog"
<Dialog> <DialogTrigger asChild> <Button variant="outline">Open</Button> </DialogTrigger> <DialogContent> <DialogHeader> <DialogTitle>Are you absolutely sure?</DialogTitle> <DialogDescription> {"This action cannot be undone. This will permanently delete your account and remove your data from our servers."} </DialogDescription> </DialogHeader> </DialogContent></Dialog>
Examples
Custom Close Button
You can use DialogClose to build a custom close button instead of relying solely on the top-right default button.
API Reference
The Dialog component uses Radix UI Primitives. For a complete API reference, please refer to the Radix UI Dialog Documentation.
Prop
Type
Default
Description
open
boolean
-
The controlled open state of the dialog.
defaultOpen
boolean
false
The open state of the dialog when it is initially rendered.
onOpenChange
function
-
Event handler called when the open state of the dialog changes.
modal
boolean
true
Whether the dialog should be rendered as a modal (traps focus and blocks background interaction).
DialogContent
Prop
Type
Default
Description
showCloseButton
boolean
true
Whether to display the built-in 'X' close button in the top right.
Notes on Monolith Design
In line with the DESIGN.md guidelines for Monolith:
Geometry: The Dialog uses rounded-none and strict 1px border constraints, without large drop-shadows.
Animation: Entry and exit animations are kept crisp (duration-150) and simple (zoom-in-95 / fade-in-0) to avoid sluggish feels.