PHPackages                             elegantly/livewire-modal - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. elegantly/livewire-modal

ActiveLibrary[Utility & Helpers](/categories/utility)

elegantly/livewire-modal
========================

Modal for your Livewire App. Done right.

v2.0.3(3mo ago)493.6k↓35.7%11MITBladePHP ^8.1CI failing

Since Mar 25Pushed 1mo ago1 watchersCompare

[ Source](https://github.com/ElegantEngineeringTech/livewire-modal)[ Packagist](https://packagist.org/packages/elegantly/livewire-modal)[ Docs](https://github.com/ElegantEngineeringTech/livewire-modal)[ GitHub Sponsors](https://github.com/ElegantEngineeringTech)[ RSS](/packages/elegantly-livewire-modal/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (13)Versions (17)Used By (1)

Livewire Modals. Done Right.
============================

[](#livewire-modals-done-right)

[![Latest Version on Packagist](https://camo.githubusercontent.com/f8c2a39eb2504e945d1b4c5824e690c0c55d266a69b394c34a806653fd4c80c6/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f656c6567616e746c792f6c697665776972652d6d6f64616c2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/elegantly/livewire-modal)[![GitHub Tests Action Status](https://camo.githubusercontent.com/ce271c009126259f0521d9649c35a00dc9adfbb048fdebed80501dce3fc973fa/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f456c6567616e74456e67696e656572696e67546563682f6c697665776972652d6d6f64616c2f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/ElegantEngineeringTech/livewire-modal/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/415008d63ec2cbfe130b7ffe4d6bda601b831f5aa1dc4ef14bb10f529c081343/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f456c6567616e74456e67696e656572696e67546563682f6c697665776972652d6d6f64616c2f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/ElegantEngineeringTech/livewire-modal/actions?query=workflow%3A%22Fix+PHP+code+style+issues%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/ced8431e9d83d167629c51418167c2b6f162b0007c39714cc380fbab050dded1/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f656c6567616e746c792f6c697665776972652d6d6f64616c2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/elegantly/livewire-modal)

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
------------

[](#requirements)

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

How It Works
------------

[](#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
------------

[](#installation)

Install the package via Composer:

```
composer require elegantly/livewire-modal
```

To customize modal behavior, publish the views with:

```
php artisan vendor:publish --tag="livewire-modal-views"
```

Usage
-----

[](#usage)

### Configuring Tailwind CSS

[](#configuring-tailwind-css)

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

```
export default {
    content: [
        "./vendor/elegantly/livewire-modal/resources/views/**/*.blade.php",
    ],
};
```

### Setting Up Your Application

[](#setting-up-your-application)

Add the modal manager component `` at the end of your `body` tag, typically in your layout views:

```

    ...

```

### Preparing Your Modals

[](#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

[](#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:

```

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
                rhoncus, augue eget vulputate vehicula, justo dui auctor est, at
                iaculis urna orci ut nunc.

```

#### Controlling the Modal Position

[](#controlling-the-modal-position)

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

```

     ...

```

```

     ...

```

#### Fullscreen Modal

[](#fullscreen-modal)

To make a modal fullscreen, use the `fullscreen` prop:

```
 ...
```

#### Creating a Slideover Component

[](#creating-a-slideover-component)

```

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
                rhoncus, augue eget vulputate vehicula, justo dui auctor est, at
                iaculis urna orci ut nunc.

```

### Opening a Modal

[](#opening-a-modal)

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

```

    Open

```

```

    Open

```

```
Livewire.dispatch("modal-open", {
    modal: "users.show",
    props: { userId: 1 },
});
```

### Preloading a Modal

[](#preloading-a-modal)

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

```
Livewire.dispatch("modal-preload", {
    modal: "users.show",
    props: { userId: 1 },
});
```

### Preloading a Modal on Hover

[](#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.

```

    Preload and Open

```

### Closing the Current Modal

[](#closing-the-current-modal)

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

```
Close
```

```
Close
```

```
Livewire.dispatch("modal-close");
```

### Closing All Modals

[](#closing-all-modals)

To close all modals at once:

```
Close
```

```
Close All
```

```
Livewire.dispatch("modal-close-all");
```

Testing
-------

[](#testing)

Run the test suite with:

```
composer test
```

Changelog
---------

[](#changelog)

For recent changes, see [CHANGELOG](CHANGELOG.md).

Contributing
------------

[](#contributing)

See [CONTRIBUTING](CONTRIBUTING.md) for contribution guidelines.

Security Vulnerabilities
------------------------

[](#security-vulnerabilities)

For information on reporting security vulnerabilities, please review [our security policy](../../security/policy).

Credits
-------

[](#credits)

- [Quentin Gabriele](https://github.com/QuentinGab)
- [All Contributors](../../contributors)

License
-------

[](#license)

This package is licensed under the MIT License. See [License File](LICENSE.md) for details.

###  Health Score

50

—

FairBetter than 96% of packages

Maintenance86

Actively maintained with recent releases

Popularity34

Limited adoption so far

Community14

Small or concentrated contributor base

Maturity54

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 78.8% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~22 days

Recently: every ~75 days

Total

15

Last Release

107d ago

Major Versions

v0.2.4 → v1.0.02025-03-31

v1.0.4 → v2.0.02026-01-18

### Community

Maintainers

![](https://www.gravatar.com/avatar/d769563728757858e249f266ac2555f28db5640124df92821ed17d93ee76fc7b?d=identicon)[QuentinGab](/maintainers/QuentinGab)

---

Top Contributors

[![QuentinGab](https://avatars.githubusercontent.com/u/40128136?v=4)](https://github.com/QuentinGab "QuentinGab (41 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (8 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (3 commits)")

---

Tags

laravellivewiretailwindcsslaravelElegantlylivewire-modal

###  Code Quality

TestsPest

Static AnalysisPHPStan

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/elegantly-livewire-modal/health.svg)

```
[![Health](https://phpackages.com/badges/elegantly-livewire-modal/health.svg)](https://phpackages.com/packages/elegantly-livewire-modal)
```

###  Alternatives

[leandrocfe/filament-apex-charts

Apex Charts integration for Filament PHP.

4861.2M8](/packages/leandrocfe-filament-apex-charts)[spatie/laravel-livewire-wizard

Build wizards using Livewire

4061.0M4](/packages/spatie-laravel-livewire-wizard)[ralphjsmit/livewire-urls

Get the previous and current url in Livewire.

82270.3k4](/packages/ralphjsmit-livewire-urls)[worksome/exchange

Check Exchange Rates for any currency in Laravel.

123544.7k](/packages/worksome-exchange)[hydrat/filament-table-layout-toggle

Filament plugin adding a toggle button to tables, allowing user to switch between Grid and Table layouts.

6292.3k1](/packages/hydrat-filament-table-layout-toggle)[codebar-ag/laravel-filament-json-field

A Laravel Filament JSON Field integration with CodeMirror support

1124.1k](/packages/codebar-ag-laravel-filament-json-field)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)