Modal
Dialog boxes and overlays for displaying content and capturing user input, enhanced with DaisyUI 5 and Tailwind 4 features
Basic Modal
Simple modal dialog with title and content
Basic Modal
This is a basic modal with some content. You can put any content here.
Show Code
Form Modal
Modal containing a form for user input
Create Account
Show Code
Confirmation Modal
Modal for confirming dangerous actions
Delete Item
This action cannot be undone. Are you sure you want to delete this item?
Show Code
Modal without Backdrop
Modal that doesn't show a backdrop overlay
No Backdrop
This modal doesn't have a backdrop, so the background remains interactive.
Show Code
Non-Responsive Modal
Modal with fixed width, not responsive
Fixed Width
This modal has a fixed width and doesn't adapt to screen size.
Show Code
Usage Notes
- Use Modal for server-side rendered modals that show static content
- For interactive modals with close handlers, create an island component
- Always provide a way to close the modal (close button, backdrop click, or escape key)
- Use modal-action class for button containers at the bottom with improved spacing
- Consider using alert styles for confirmation modals with enhanced color contrast
- Set responsive={true} for modals with wide content like tables
- Enhanced backdrop with better blur and opacity handling in DaisyUI 5
- Smoother open/close animations with improved transition timing
- Better focus management with enhanced focus trapping and restoration
- Improved mobile optimization with better touch handling and responsive behavior
- Enhanced accessibility with better ARIA attributes and screen reader support
- Better keyboard navigation with improved escape key and tab handling
- Supports Tailwind 4 container queries for responsive modal content
- Enhanced backdrop-blur effects with better browser compatibility
- Improved z-index management for better stacking context
- Better performance with optimized CSS animations and reduced reflows
- Respects user's prefers-reduced-motion settings for animations
- Fully backward compatible - all existing modal patterns continue to work
API Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| backdrop | boolean | No | true | Whether to show backdrop overlay Examples: true, false Since: 1.0.0 |
| children | any | No | - | Component content |
| class | string | No | - | Additional CSS classes |
| id | string | No | - | HTML id attribute |
| onBackdropClick | Function | No | - | Callback when backdrop is clicked |
| onClose | Function | No | - | Callback when modal closes |
| onOpen | Function | No | - | Callback when modal opens |
| open | boolean | No | false | Whether modal is open Examples: true, false Since: 1.0.0 |
| position | 'top' | 'middle' | 'bottom' | No | "middle" | Modal position (DaisyUI 5) Examples: top, middle, bottom Since: 2.0.0 |
| responsive | boolean | No | true | Whether modal should be responsive Examples: true, false Since: 1.0.0 |
| title | string | No | - | Modal title text |