Dialog
A modal dialog that interrupts the user with important content and expects a response.
Installation
pnpm dlx shadcn@latest add https://reui.io/r/dialog.json
Examples
Default
No Overlay
Scrollable
Fullscreen
API Reference
This component is built using Radix UI Dialog primitives. For detailed information, please visit the full API reference.
Dialog
This component is based on the Dialog.Root primitive. For more details, refer to the original documentation.
DialogTrigger
This component is based on the Dialog.Trigger primitive. For more details, refer to the original documentation.
DialogPortal
This component is based on the Dialog.Portal primitive. For more details, refer to the original documentation.
DialogOverlay
This component is based on the Dialog.Overlay primitive and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
className |
DialogContent
This component is based on the Dialog.Content primitive and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
close | ||
className |
DialogClose
This component is based on the Dialog.Close primitive. For more details, refer to the original documentation.
DialogHeader
This component is a custom implementation for the dialog header section that provides a consistent layout for the title and description.
| Prop | Type | Default |
|---|---|---|
className |
DialogFooter
This component is a custom implementation for the dialog footer section that provides a responsive layout for action buttons.
| Prop | Type | Default |
|---|---|---|
className |
DialogTitle
This component is based on the Dialog.Title primitive and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
className |
DialogDescription
This component is based on the Dialog.Description primitive and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
className |