Dialog
Modal dialog overlay for important interactions requiring user focus. Accessible, keyboard navigable (Esc to close), with backdrop overlay and smooth animations. Built on Radix UI with focus trapping. Exports sub-components (Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter).
Live Preview
Basic
Basic Dialog
Simple dialog with header, content, and footer
Confirmation
Confirmation Dialog
Dialog for confirming destructive actions
Forms
Form Dialog
Dialog containing a form
Usage Guidance
✓ When to Use
Use for critical interactions: confirmations, destructive actions, complex forms, content creation, multi-step workflows, detailed views. Best when user must complete/dismiss before continuing.
✗ When NOT to Use
Don't use for simple notifications (use Alert or toast), non-critical info (use Popover), navigation (use proper routing), or frequent interruptions (consider inline alternatives).