Base

Dialog

Asks for a decision or a short task on top of the page.

shadcn/uiOverlays

shadcn/ui docs Radix APIcomponents/ui/dialog.tsx

Preview

Installation

It's already in this Base. In another project, add it with the shadcn CLI, then switch its cn import to @/lib/utils, its icons to @/components/icons, and its text-sm and text-xs to text-ui-s and text-ui-xs.

npx shadcn@latest add dialog

Examples

Confirm

A decision that can't be undone: what goes, what stays.

With a form

One or two fields. Anything longer gets its own page.

Props

The ones that change how it looks or behaves. The rest are the Radix primitive's, in its API.

Prop	Type	Default
open	boolean	–
onOpenChange	(open: boolean) => void	–
showCloseButton	boolean	true

Guidelines

Use it

Decisions that can't be undone: say what goes and what stays.
Buttons named for the outcome: Delete draft, Keep it.

Don't

Put a long form in it: give it a page.
Open one dialog from another.

Used in

The screens in this Base that show it, found in the code.

Accessibility

Focus moves into the dialog and back to the trigger when it closes.
Escape closes it. Every dialog needs a DialogTitle, even a visually hidden one.