PHPackages                             devsrv/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. devsrv/livewire-modal

ActiveLibrary

devsrv/livewire-modal
=====================

turn laravel livewire component into modal

v1.2.0(3y ago)138.1k↓50%4[5 issues](https://github.com/devsrv/livewire-modal/issues)MITPHPPHP ^7.3|^8.0|^8.2

Since May 1Pushed 2y ago1 watchersCompare

[ Source](https://github.com/devsrv/livewire-modal)[ Packagist](https://packagist.org/packages/devsrv/livewire-modal)[ Docs](https://github.com/devsrv/livewire-modal)[ RSS](/packages/devsrv-livewire-modal/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (6)Dependencies (3)Versions (8)Used By (0)

Livewire Modal
==============

[](#livewire-modal)

[![Latest Version on Packagist](https://camo.githubusercontent.com/e543b55b715b20162001f794090c98f4abf586216c070851668e07345a129a63/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6465767372762f6c697665776972652d6d6f64616c2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/devsrv/livewire-modal)[![Total Downloads](https://camo.githubusercontent.com/150a2d132231fc2bd75b901615c2f98069bab934cd78618810190db2554ecf0d/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6465767372762f6c697665776972652d6d6f64616c2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/devsrv/livewire-modal)

Turn Laravel Livewire Component into Modal.

[![](https://camo.githubusercontent.com/347bacdb94350d732b812796c0027b3330fbb7a2c69af810bf7019a2f50ece7d/68747470733a2f2f73746167696e672e766f79616e7463732e636f6d2f736f757261762f7374617469632f6c697665776972652d6d6f64616c2d73616d706c652d616c742e676966)](https://camo.githubusercontent.com/347bacdb94350d732b812796c0027b3330fbb7a2c69af810bf7019a2f50ece7d/68747470733a2f2f73746167696e672e766f79616e7463732e636f6d2f736f757261762f7374617469632f6c697665776972652d6d6f64616c2d73616d706c652d616c742e676966)

🏷 Features
----------

[](#-features)

- Modal triggered by javascript i.e. opens instantly without waiting for livewire network round trip to finish ( no laggy feeling )
- Skeleton loading indicator
- Support alert message ( info, warning, success, danger )
- Trigger from Alpine Component / Vanilla JS / Livewire Class Component

🧾 Requirements
--------------

[](#-requirements)

**Bootstrap**4 or 5*no bootstrap support coming soon*Jquery*for bootstrap 4 only*Laravel>= 7Livewire>= 2.0Alpine JS📥 Installation
--------------

[](#-installation)

```
composer require devsrv/livewire-modal
```

#### Include the base modal component

[](#include-the-base-modal-component)

```

    ...
    @livewireStyles

    ...
     👈
    @livewireScripts

```

#### Publish assets

[](#publish-assets)

```
php artisan vendor:publish --provider="devsrv\LivewireModal\LivewireModalServiceProvider" --tag=public
```

#### Publish config

[](#publish-config)

```
php artisan vendor:publish --provider="devsrv\LivewireModal\LivewireModalServiceProvider" --tag=config
```

> config support bootstrap theme: bs4 | bs5

### 📌 Updating

[](#-updating)

> **Important:** when updating the package make sure to re-publish the assets with `--force` flag

```
php artisan vendor:publish --provider="devsrv\LivewireModal\LivewireModalServiceProvider" --tag=public --force
```

⚗️ Usage
--------

[](#️-usage)

### [![](https://camo.githubusercontent.com/7c32765f2577e5fb5df0b68edc15e95f33430b5f5f7020226fa3438036260a07/68747470733a2f2f6c61726176656c2d6c697665776972652e636f6d2f66617669636f6e2e69636f)](https://camo.githubusercontent.com/7c32765f2577e5fb5df0b68edc15e95f33430b5f5f7020226fa3438036260a07/68747470733a2f2f6c61726176656c2d6c697665776972652e636f6d2f66617669636f6e2e69636f) Create Livewire Component

[](#-create-livewire-component)

No consideration required, create livewire component as usual. Use livewire's `mount` to handle passed parameters

### ✨ Open Modal

[](#-open-modal)

###### ✔️ From Alpine Component

[](#️-from-alpine-component)

```

  open

```

###### ✔️ Via Vanilla JS

[](#️-via-vanilla-js)

```

  open

```

###### ✔️ Via Trigger Blade Component

[](#️-via-trigger-blade-component)

```
open

```

###### ✔️ From Livewire Class

[](#️-from-livewire-class)

```
$this->dispatchBrowserEvent('open-x-modal', ['title' => 'My Modal', 'modal' => 'product.order', 'args' => ['id' => 1, 'rate' => 20]]);
```

> 💡 Modal size supports `sm` `lg` `xl` *// completely optional*

🌈 Bonus
-------

[](#-bonus)

you are free to put content in livewire view file in any structure, however the package provides an blade component for bootstrap modal which you can use as:

```

        ...

    ...

        ...
        Save

```

#### ✌🏼 Two reasons to use this component

[](#-two-reasons-to-use-this-component)

🟢 a pretty line progress loading indicator which appears in the top when livewire loading state changes

🟢 alert notification message which can be triggered by:

```
$this->info('Hi !, i am an alert');  // support `info` `warning` `success` `danger`
```

Changelog
---------

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

👋🏼 Say Hi!
----------

[](#-say-hi)

Leave a ⭐ if you find this package useful 👍🏼, don't forget to let me know in [Twitter](https://twitter.com/srvrksh)

###  Health Score

35

—

LowBetter than 80% of packages

Maintenance12

Infrequent updates — may be unmaintained

Popularity32

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity69

Established project with proven stability

 Bus Factor1

Top contributor holds 100% 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 ~138 days

Recently: every ~173 days

Total

6

Last Release

1148d ago

PHP version history (3 changes)1.0.0PHP >=7.3

1.1.0PHP ^7.3|^8.0

v1.2.0PHP ^7.3|^8.0|^8.2

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/26733312?v=4)[Sourav Rakshit](/maintainers/devsrv)[@devsrv](https://github.com/devsrv)

---

Top Contributors

[![devsrv](https://avatars.githubusercontent.com/u/26733312?v=4)](https://github.com/devsrv "devsrv (39 commits)")

---

Tags

alpine-jslaravellivewirelivewire-componentmodallaravellivewiremodallivewire-modal

###  Code Quality

TestsPHPUnit

### Embed Badge

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

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

###  Alternatives

[livewire/flux

The official UI component library for Livewire.

9475.0M86](/packages/livewire-flux)[wire-elements/modal

Laravel Livewire modal component

1.2k3.8M31](/packages/wire-elements-modal)[livewire/volt

An elegantly crafted functional API for Laravel Livewire.

4205.3M84](/packages/livewire-volt)

PHPackages © 2026

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