Components
Modal
A dialog you can always get out of — except when the question is destructive.
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/modal.jsonDismissal is plural on purpose
Escape, the scrim, and the close button all dismiss. A dialog with exactly one exit is the thing people get stuck in.
The exception is dismissOnScrim={false}, which exists for destructive
confirmations. There, a stray click landing on the backdrop should not count as
an answer.
What it does while open
Focus moves into the panel, and returns to whatever was focused before once it closes. The body scroll is locked, and the scrollbar's width is held as padding so the page behind does not shift sideways as it disappears.
The panel has no outline — the shadow and the scrim already separate it from the page, and an edge on top of both is the third statement of the same thing.
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | Controlled. |
| onClose | () => void | — | Called by all dismissal paths. |
| size | "sm" | "md" | "lg" | "md" | 400, 520 and 720px. |
| dismissOnScrim | boolean | true | Turn off for destructive confirmations. |
| footer | ReactNode | — | Actions, right-aligned on a subtle strip. |