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

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

andisiahaan/livewire-modal
==========================

A Livewire 4 modal component that supports multiple child modals while maintaining state

1.0.3(6mo ago)05↓90.9%MITPHPPHP ^8.2

Since Dec 7Pushed 6mo agoCompare

[ Source](https://github.com/andisiahaan/livewire-modal)[ Packagist](https://packagist.org/packages/andisiahaan/livewire-modal)[ RSS](/packages/andisiahaan-livewire-modal/feed)WikiDiscussions main Synced 3w ago

READMEChangelog (4)Dependencies (3)Versions (5)Used By (0)

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

[](#livewire-modal)

A Livewire 4 modal component that supports multiple child modals while maintaining state.

[![Latest Version on Packagist](https://camo.githubusercontent.com/b98adf968a8eb3f706ef6801011507e318ab6cee3824659f820b9f0cd70ae93d/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f616e64697369616861616e2f6c697665776972652d6d6f64616c2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/andisiahaan/livewire-modal)[![Total Downloads](https://camo.githubusercontent.com/2357cb85fba48b52d17f614adcaa096cfc095c284bddb9e668912059dadef9d0/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f616e64697369616861616e2f6c697665776972652d6d6f64616c2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/andisiahaan/livewire-modal)

Installation
------------

[](#installation)

```
composer require andisiahaan/livewire-modal
```

Setup
-----

[](#setup)

Add the Livewire directive to your layout file (typically before ``):

```

    @livewire('livewire-modal')

```

### TailwindCSS

[](#tailwindcss)

Add the following to your `tailwind.config.js` to include the modal styles:

```
export default {
    content: [
        './vendor/andisiahaan/livewire-modal/resources/views/*.blade.php',
        // ... your other paths
    ],
    safelist: [
        {
            pattern: /max-w-(sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl)/,
            variants: ['sm', 'md', 'lg', 'xl', '2xl']
        }
    ],
}
```

Creating a Modal
----------------

[](#creating-a-modal)

Create a Livewire component that extends `ModalComponent`:

```