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

ActiveLibrary

kezeneilhou/livewire-tailwind-modal
===================================

Dynamic Laravel Livewire 3 Tailwind modals.

v2.0.7(2mo ago)0738↓45.9%MITPHP

Since Jun 28Pushed 2mo agoCompare

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

READMEChangelog (10)Dependencies (4)Versions (16)Used By (0)

```
# Laravel Livewire Tailwind Modals

A dynamic global modal component for **Laravel 12** and **Livewire 4**, built to work seamlessly with **Livewire Flux**.

This package allows you to load any Livewire component inside a single reusable modal, without polluting your DOM with multiple modal instances.

---

## 📋 Requirements

- PHP 8.2+
- Laravel 12+
- Livewire 4+
- Livewire Flux (must be installed and configured)

---

## 📦 Installation

Install the package via Composer:

```bash
composer require kezeneilhou/livewire-tailwind-modal
```

---

⚙️ Setup
--------

[](#️-setup)

### 1. Publish Assets

[](#1-publish-assets)

Publish the JavaScript and view files:

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

---

### 2. Register JavaScript (Vite)

[](#2-register-javascript-vite)

Import the modal script into your main `app.js` file:

```
// resources/js/app.js
import './vendor/livewire-tailwind-modal/modals.js';
```

Then rebuild assets:

```
npm run dev
```

---

### 3. Configure Layout

[](#3-configure-layout)

Add the `` component to your main layout (for example: `layouts/app.blade.php`).

Place it near the end of the `` tag.

Make sure `@fluxScripts` and `@livewireScripts` are included.

```

    @fluxStyles

    {{ $slot }}

    @fluxScripts
    @livewireScripts

```

---

🚀 Usage
-------

[](#-usage)

### Opening a Modal (Blade / JavaScript)

[](#opening-a-modal-blade--javascript)

You can trigger a modal from a normal Blade view or JavaScript using `Livewire.dispatch`.

```

    Open Modal

```

---

### Opening from a Livewire View

[](#opening-from-a-livewire-view)

```

        Open Modal

```

---

📌 Passing Parameters
--------------------

[](#-passing-parameters)

You may pass parameters, size, and title when opening a modal.

### Supported Sizes

[](#supported-sizes)

ValueSize1Small2Medium (default)3Large4Extra Large52XL63XL---

### Example with Parameters

[](#example-with-parameters)

```

        Open Modal

```

---

### Receiving Parameters in Component

[](#receiving-parameters-in-component)

```
namespace App\Http\Livewire\Users;

use Livewire\Component;

class Update extends Component
{
    public function mount($name)
    {
        // $name = "test"
    }

    public function render()
    {
        return view('users.update');
    }
}
```

---

❌ Closing Modals
----------------

[](#-closing-modals)

### From Blade

[](#from-blade)

```

    Close

```

---

### From Livewire Component

[](#from-livewire-component)

```
public function save()
{
    $this->validate();

    // Save logic...

    $this->dispatch('hideModal');
}
```

---

📤 Publishing Views (Customization)
----------------------------------

[](#-publishing-views-customization)

If you want to customize the modal layout or animations, publish the package view:

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

The view will be copied to:

```
resources/views/vendor/livewire-tailwind-modal

```

You may edit it freely. The package will automatically use your customized view.

---

🛠 Troubleshooting
-----------------

[](#-troubleshooting)

### JavaScript Not Loading

[](#javascript-not-loading)

Make sure:

- Assets are published
- `modals.js` is imported in `app.js`
- `npm run build` has been executed

### Alpine Errors

[](#alpine-errors)

Ensure Alpine is loaded before `modals.js`:

```
import Alpine from 'alpinejs';

window.Alpine = Alpine;
Alpine.start();

import './vendor/livewire-tailwind-modal/modals.js';
```

---

###  Health Score

44

—

FairBetter than 92% of packages

Maintenance88

Actively maintained with recent releases

Popularity19

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity48

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 50.7% 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 ~45 days

Recently: every ~8 days

Total

15

Last Release

61d ago

Major Versions

v1.0.7 → v2.0.02026-02-09

### Community

Maintainers

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

---

Top Contributors

[![mozhuilungdsuo](https://avatars.githubusercontent.com/u/33083654?v=4)](https://github.com/mozhuilungdsuo "mozhuilungdsuo (35 commits)")[![aliqasemzadeh](https://avatars.githubusercontent.com/u/26847446?v=4)](https://github.com/aliqasemzadeh "aliqasemzadeh (16 commits)")[![kezeneilhou](https://avatars.githubusercontent.com/u/16679337?v=4)](https://github.com/kezeneilhou "kezeneilhou (16 commits)")[![marispro](https://avatars.githubusercontent.com/u/5610414?v=4)](https://github.com/marispro "marispro (1 commits)")[![MDylan](https://avatars.githubusercontent.com/u/2527132?v=4)](https://github.com/MDylan "MDylan (1 commits)")

### Embed Badge

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

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

###  Alternatives

[livewire/volt

An elegantly crafted functional API for Laravel Livewire.

4195.3M84](/packages/livewire-volt)[namu/wirechat

A Laravel Livewire messaging app for teams with private chats and group conversations.

54324.5k](/packages/namu-wirechat)[mhmiton/laravel-modules-livewire

Using Laravel Livewire in Laravel Modules package with automatically registered livewire components for every modules.

236409.6k9](/packages/mhmiton-laravel-modules-livewire)[ramonrietdijk/livewire-tables

Dynamic tables for models with Laravel Livewire

21147.4k](/packages/ramonrietdijk-livewire-tables)[lakm/laravel-comments

Integrate seamless commenting functionality into your Laravel project.

40012.9k1](/packages/lakm-laravel-comments)[marcorieser/statamic-livewire

A Laravel Livewire integration for Statamic.

2381.5k10](/packages/marcorieser-statamic-livewire)

PHPackages © 2026

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