Getting Started
UI Library
- Button
- Date Picker
- Field
- Fields
- Input Group
- File Uploader
- Signature Pad
- Text Area
- Container
- Section Header
- Separator
- Spacer
- Action Row
- Breadcrumb
- Tabs
- Tabs Container
- Card
- Image
- Text
- Title
- Video Player
- Card Collection
- Data Grid
- List Collection
- Table Collection
- Bar Chart
- Big Number
- Line Chart
- Radial Chart
- Hint
- Progress
- Spinner
- Skeleton
- Toast
- Sheet
- Dialog
- Real-world patterns
- Primitives
Dialogs are modal overlays that interrupt the user to capture a decision or display focused content. Use them for confirmations, forms, and short tasks that require attention before continuing.
Basic Usage
Sticky Footer
For long content, constrain the body height and let it scroll while keeping the footer visible.
API Reference
Dialog
Root component. Manages open/closed state.
DialogTrigger
The element that opens the dialog. Use asChild to render as your own element.
DialogContent Props
| Prop | Type | Default | Description |
|---|---|---|---|
showCloseButton | boolean | true | Whether to render the X close button in the top-right corner |
DialogHeader
Container for DialogTitle and DialogDescription. Provides consistent spacing.
DialogTitle
The dialog's accessible title. Always include this for screen reader support.
DialogDescription
Optional subtitle shown below the title.
DialogFooter Props
| Prop | Type | Default | Description |
|---|---|---|---|
showCloseButton | boolean | false | Renders a "Close" button inside the footer automatically |
DialogClose
Closes the dialog when activated. Use asChild to render as a Button.