Back to Components
Overlays
Modal
Full-featured modal with backdrop, animations, and size variants.
PropsUsage ExampleVariations
Dependencies
- clsx
- tailwind-merge
Files
- components/ui/modal.tsx
Installation
Using shadcn CLI
npx shadcn add modal --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-mergeRelated 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.
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.
Popover
Floating content panel anchored to a trigger element.