Download the PHP package elegantly/livewire-modal without Composer

Livewire Modals. Done Right.

This package allows you to seamlessly open Livewire components inside modals or slideovers with powerful features:

• Support for modals, slideovers, and similar UI patterns.
• Nested and stacked modals.
• Custom styling and animations, with optional presets.
• Preloading components for faster interactions.

Requirements

• livewire/livewire: v3
• tailwindcss: v3 (not yet tested with v4)

How It Works

This package provides a single Livewire Modal component that should be placed at the end of your body tag. This component dynamically renders and manages all modal instances while maintaining a modal history.

Modals can be opened and closed by dispatching modal-open and modal-close events.

Any Livewire component can be used as a modal without requiring special interfaces or base components—just use your existing components as they are.

Installation

Install the package via Composer:

To customize modal behavior, publish the views with:

Usage

Configuring Tailwind CSS

Since the modal component is styled using Tailwind CSS, you must include its views in your Tailwind configuration file:

Setting Up Your Application

Add the modal manager component <livewire:modal /> at the end of your body tag, typically in your layout views:

Preparing Your Modals

Any Livewire component can be displayed as a modal. However, certain features, such as stacking, require additional customization.

Creating a Simple Modal Component

This package provides two Blade components to simplify stacking and positioning:

• x-livewire-modal::stack: Provides a basic layout with stacking capabilities.
• x-livewire-modal::modal: Handles positioning and stacking.

Wrap your content within these components:

Controlling the Modal Position

By default, modals are centered, but their position can be adjusted using the position prop:

Fullscreen Modal

To make a modal fullscreen, use the fullscreen prop:

Creating a Slideover Component

Opening a Modal

To open a modal, dispatch a modal-open event:

Preloading a Modal

To preload a modal, dispatch a modal-preload event with the same props used to open it:

Preloading a Modal on Hover

Using the custom Alpine directive, you can preload a modal when the user starts hovering over a button. This improves UX by ensuring faster modal openings.

Closing the Current Modal

To close the currently active modal, dispatch a modal-close event:

Closing All Modals

To close all modals at once:

Testing

Run the test suite with:

Changelog

For recent changes, see CHANGELOG.

Contributing

See CONTRIBUTING for contribution guidelines.

Security Vulnerabilities

For information on reporting security vulnerabilities, please review our security policy.

Credits

• Quentin Gabriele
• All Contributors

License

This package is licensed under the MIT License. See License File for details.