Basic Modal
This is a basic modal with header, body, and footer slots.
<x-ui.modal alpine-show="showModal">
<x-slot:header>Modal Title</x-slot:header>
<x-slot:body>Content</x-slot:body>
<x-slot:footer>Footer</x-slot:footer>
</x-ui.modal>Sizes
This is a small modal.
This is the default size modal.
This is a large modal.
This is an extra large modal.
This is a 2XL modal.
This is a fullscreen modal.
Livewire Integration
Use wire-model for Livewire integration:
// In Livewire component:
public $showModal = false;
// In Blade:
<x-button wire:click="$set('showModal', true)">Open</x-button>
<x-ui.modal wire-model="showModal">
<x-slot:header>Title</x-slot:header>
<x-slot:body>Content</x-slot:body>
</x-ui.modal>Without Header/Footer
This modal uses the default slot without header or footer.
<x-ui.modal alpine-show="showSimple">
<div class="p-4">Content</div>
</x-ui.modal>Non-closeable Modal
This modal cannot be closed by clicking backdrop, ESC key, or close button.
Backdrop Effects
This is the default modal without blur or darker backdrop effects.
This modal has a blur effect on the backdrop.
This modal has a darker backdrop (darker).
This modal has both blur effect and darker backdrop.
Overview
Modal component provides a flexible dialog overlay for displaying content, forms, or confirmations.
Sizes
Available sizes:
sm- max-w-mddefault- max-w-2xllg- max-w-4xlxl- max-w-6xl2xl- max-w-7xlfullscreen- Full screen modal
Slots
Available slots:
header- Modal header (optional)body- Modal body content (optional)footer- Modal footer (optional)default- Default slot (used when body is not provided)
Props
size
- string (default: default)
Modal size: sm, default, lg, xl, 2xl, fullscreen
closeable
- bool (default: true)
Show close button in header
closeOnBackdropClick
- bool (default: true)
Close modal when clicking backdrop
closeOnEscape
- bool (default: true)
Close modal when pressing ESC key
wire-model
- string|null
Livewire property name for modal state
alpine-show
- string|null
Alpine.js variable name for modal state
blur
- bool (default: false)
Add backdrop blur effect to the modal overlay
darker
- bool (default: false)
Make the backdrop darker (increased opacity)
Usage Examples
Alpine.js (default):
<x-button x-data="{ open: false }" @click="open = true">Open</x-button>
<x-ui.modal alpine-show="open">
<x-slot:header>Title</x-slot:header>
<x-slot:body>Content</x-slot:body>
</x-ui.modal>Livewire:
<x-button wire:click="$set('showModal', true)">Open</x-button>
<x-ui.modal wire-model="showModal">
<x-slot:header>Title</x-slot:header>
<x-slot:body>Content</x-slot:body>
</x-ui.modal>With blur effect:
<x-ui.modal alpine-show="showModal" blur>
<x-slot:header>Title</x-slot:header>
<x-slot:body>Content</x-slot:body>
</x-ui.modal>With darker backdrop:
<x-ui.modal alpine-show="showModal" darker>
<x-slot:header>Title</x-slot:header>
<x-slot:body>Content</x-slot:body>
</x-ui.modal>With both blur and darker backdrop:
<x-ui.modal alpine-show="showModal" blur darker>
<x-slot:header>Title</x-slot:header>
<x-slot:body>Content</x-slot:body>
</x-ui.modal>Features
- Alpine.js integration (default)
- Livewire wire:model support
- Smooth animations (fade + scale)
- Backdrop blur effect
- ESC key support
- Click outside to close
- Dark mode support
- Accessibility (ARIA attributes)
- Multiple size options
- Flexible slot system