Dialog

Modal dialog with backdrop, centred popup, header, footer, and close button. Built on Base UI Dialog.

Preview

Installation

bash

npx shadcn@latest add @layout/dialog

Usage

tsx

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
  DialogClose,
} from "@/components/ui/dialog"

Examples

Informational

Guidelines for AI agents

Use for tasks that require focused user attention and cannot be performed inline — forms, confirmations needing context, and detail views. Trigger with DialogTrigger using the render prop pattern. Always include a DialogTitle for accessibility. Use DialogClose inside DialogFooter for explicit dismiss actions.

Never

Neveruse Dialog for destructive confirmations — use AlertDialog instead so screen readers announce the alert role
Neveruse Dialog for contextual information anchored to a trigger — use Popover or HoverCard instead
Neveruse Dialog for mobile-first slide-up panels — use Sheet (side bottom) or Drawer instead
Nevernest interactive dialogs; open a second dialog only after the first is closed

Tokens consumed

--layout-overlay--layout-overlay-fg--layout-border--layout-shadow-lg--layout-radius--layout-duration-base--layout-ring