Modal
A dialog component powered by Alpine.js with backdrop, focus management, and smooth animations. Supports multiple sizes and flexible content through named slots.
Interactive Demo
Usage Example
Modal Title
Modal content goes here.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | false | Controls modal visibility (use x-bind:open) |
| size | string | 'md' | Modal size: sm, md, lg |
| closeable | boolean | true | Allow closing via backdrop/Escape |
| ariaLabelledby | string|null | null | ID of title element for accessibility |
| class | string | '' | Additional CSS classes |
Key Features
Alpine.js Powered
Reactive state with smooth enter/exit animations
Backdrop & Escape
Click backdrop or press Escape to close (when closeable)
Flexible Slots
Title, body, and footer slots for structured content
ARIA Compliant
Proper role="dialog" and aria-modal attributes