Dialogshadcn
A focused task on top of the page.
Overlays- Install
- npx shadcn add dialog
- Import from
- @/components/ui/dialog
- Guidance
- draft · v0.1.0
Examples
As installed from shadcn – rendering in jsp-ds tokens through the bridge.
Guidance
When to use
- A short task that needs the person's full attention and can be finished in place: rename, invite, a quick form.
When not to use
- To confirm a destructive action – use an Alert dialog.
- For long or multi-step work – give it a page.
- For information people need while they keep working – use a Sheet or Popover.
Rules
- A
DialogTitlethat says what the task is, and aDialogDescriptionwhen the title isn't enough. - Actions at the end: the main one is a default Button, the other closes with
DialogClose. - Don't open a dialog from a dialog.
Accessibility
- Radix moves focus in, keeps it there, closes on Esc and returns focus to the trigger. Don't override these.
Spec
The variables this component reads, and the jsp-ds token behind each, resolved live. Switch mode to see them change.
| Token | CSS variable | Value now |
|---|---|---|
| color.surface.defaultT-3: surface.overlay to come | --popover | … |
| color.text.default | --popover-foreground | … |
| color.border.subtle | --border | … |
| shadow.lg | --shadow-lg | … |
Install
Terminal
npx shadcn add dialogImport
import { Dialog } from "@/components/ui/dialog"From shadcn’s own registry. Don’t edit the installed file – jsp-ds styles it through the bridge, and fixes go in styles/overrides.css with an issue.