Overlays · Application UI
Dialog
A modal dialog compound component built on Base UI's Dialog primitive, with overlay, content popup, header, footer, title, description, and close button sub-components.
Feature showcase
Installation
Features
Compound overlay parts
Ships root, trigger, portal, overlay, content, title, description, footer, and close parts.
Controlled or uncontrolled
Supports open/defaultOpen with onOpenChange for app-managed dialog state.
Accessible modal behavior
Builds on Base UI Dialog for focus handling and dialog semantics.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | - | Controlled open state of the dialog. |
| defaultOpen | boolean | - | Uncontrolled initial open state. |
| onOpenChange | (open: boolean) => void | - | Callback fired when the open state changes. |
| modal | boolean | true | Whether the dialog blocks interaction with the rest of the page. |
Exports
| Export | Kind | Description |
|---|---|---|
| Dialog | component | Root Base UI dialog primitive. |
| DialogTrigger | component | Element that opens the dialog. |
| DialogContent | component | Positioned dialog surface with optional close button. |
| DialogTitle | component | Accessible dialog title. |
Slots
| Slot | Element | Description |
|---|---|---|
| dialog | - | Root dialog state provider. |
| dialog-trigger | - | Trigger element. |
| dialog-overlay | - | Backdrop layer. |
| dialog-content | - | Dialog panel. |
| dialog-title | - | Title text. |
| dialog-description | - | Description text. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/dialog.tsx |
| Default example | content/examples/dialog/default.tsx |
| Form example | content/examples/dialog/with-form.tsx |