Back to Components
Overlays
Dialog
Accessible modal dialog with overlay and close button.
PropsUsage ExampleVariations
Dependencies
- clsx
- tailwind-merge
- @radix-ui/react-dialog
- lucide-react
Files
- components/ui/dialog.tsx
Installation
Using shadcn CLI
npx shadcn add dialog --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-merge @radix-ui/react-dialog lucide-reactRelated Overlays Components
Alert Dialog
Modal dialog for confirmations with accessible cancel and action buttons.
Confirm Dialog
Confirmation dialog with configurable actions and a danger variant.
Drawer
Slide-out panel from any edge with backdrop, header, and footer slots.
Mobile Drawer
Off-canvas navigation drawer with overlay and swipe-to-close support.
Modal
Full-featured modal with backdrop, animations, and size variants.
Popover
Floating content panel anchored to a trigger element.