Back to Components
Overlays
Alert Dialog
Modal dialog for confirmations with accessible cancel and action buttons.
PropsUsage ExampleVariations
Dependencies
- clsx
- tailwind-merge
- @radix-ui/react-alert-dialog
Files
- components/ui/alert-dialog.tsx
Installation
Using shadcn CLI
npx shadcn add alert-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-alert-dialogRelated Overlays Components
Confirm Dialog
Confirmation dialog with configurable actions and a danger variant.
Dialog
Accessible modal dialog with overlay and close button.
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.