Modal
A flexible and accessible modal dialog component that displays content in a layer above the page.
Basic Usage
Features
- ✅ Portal Rendering - Renders at document body level to avoid z-index conflicts
- ✅ Theme Support - Automatic dark/light mode support
- ✅ Multiple Sizes - sm, md, lg, xl options for different content needs
- ✅ Accessible - ARIA attributes, keyboard navigation, focus management
- ✅ Easy Close - ESC key, click outside, or close button
- ✅ Scroll Lock - Prevents background scrolling when open
Animation Types
Smooth scale-in with spring physics
Slides down from top with gentle bounce
Simple fade-in animation
Playful bounce with rotation
Installation
npx shadcn@latest add modal.json
Size Variants
Form Modals
Confirmation Modals
Success & No Title Modals
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| isOpen | boolean | — | Controls modal visibility |
| onClose | () => void | — | Called when modal should close |
| children | ReactNode | — | Content inside the modal |
| title | string | undefined | Optional header title |
| size | 'sm' 'md' 'lg' 'xl' | 'md' | Modal size |
| animation | 'scale' 'slide' 'fade' 'bounce' | 'scale' | Animation type |
Usage
Loading...