Components
Dialog
A modal dialog that interrupts the user with important content and expects a response.
Loading
Installation
pnpm dlx shadcn@latest add @toui/dialog
Examples
No Overlay
Loading
Scrollable
Fullscreen
Loading
Pattern
Tokens
5 CSS variables in 5 categories.
px
| CSS Variable | Value | Description |
|---|---|---|
--dialog-px | var(--component-px-xl) | 22px |
py
| CSS Variable | Value | Description |
|---|---|---|
--dialog-py | var(--component-px-xl) | — |
gap
| CSS Variable | Value | Description |
|---|---|---|
--dialog-gap | var(--component-gap-lg) | 12px — section gap |
radius
| CSS Variable | Value | Description |
|---|---|---|
--dialog-radius | var(--component-radius-lg) | — |
max-width
| CSS Variable | Value | Description |
|---|---|---|
--dialog-max-width | 32rem | 512px — sm breakpoint |
Credits
- Built with Radix UI Dialog.