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

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

microweber-deps/livewire-modal
==============================

Laravel Livewire modal component

0466PHP

Since Jul 21Pushed 2y agoCompare

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

READMEChangelogDependenciesVersions (1)Used By (0)

[![Build Status](https://github.com/wire-elements/modal/workflows/PHPUnit/badge.svg)](https://github.com/wire-elements/modal/actions)[![Total Downloads](https://camo.githubusercontent.com/d7378a2d3a63bb46b71d9f3055359eb334c72b827ff0c77ccd2681dddc97b89c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f776972652d656c656d656e74732f6d6f64616c)](https://packagist.org/packages/wire-elements/modal)[![Total Downloads](https://camo.githubusercontent.com/e69bfed3f05e1cc21db073fd958d187aca6e2ee357ed2c80da2173d10785d145/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6c697665776972652d75692f6d6f64616c)](https://packagist.org/packages/livewire-ui/modal)[![Latest Stable Version](https://camo.githubusercontent.com/f000688e17067f149fa1d4d61aea51ebd2342fe093dae57fa7c6d9ecd9886a69/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f776972652d656c656d656e74732f6d6f64616c)](https://packagist.org/packages/wire-elements/modal)[![License](https://camo.githubusercontent.com/6f725805e42be7a22cc65a3ff35afb82526a61dd19401a27dee0055ee1aa0e50/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f776972652d656c656d656e74732f6d6f64616c)](https://packagist.org/packages/wire-elements/modal)

About Wire Elements Modal
-------------------------

[](#about-wire-elements-modal)

Wire Elements Modal is a Livewire component that provides you with a modal that supports multiple child modals while maintaining state.

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

[](#installation)

[![](https://camo.githubusercontent.com/74b3c1a0927345afedb3ec2f98e0b7dd79d346ada1cb65daff0d00821f0444d4/68747470733a2f2f642e70722f692f4752363642332b)](https://philo.dev/laravel-modals-with-livewire/)

Click the image above to read a full article on using the Wire Elements modal package or follow the instructions below.

To get started, require the package via Composer:

```
composer require wire-elements/modal

```

Livewire directive
------------------

[](#livewire-directive)

Add the Livewire directive `@livewire('livewire-ui-modal')` directive to your template.

```

    @livewire('livewire-ui-modal')

```

Alpine
------

[](#alpine)

Livewire Elements Modal requires [Alpine](https://github.com/alpinejs/alpine) and the plugin[Focus](https://alpinejs.dev/plugins/focus). You can use the official CDN to quickly include Alpine:

```

```

TailwindCSS
-----------

[](#tailwindcss)

The base modal is made with TailwindCSS. If you use a different CSS framework I recommend that you publish the modal template and change the markup to include the required classes for your CSS framework.

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

Creating a modal
----------------

[](#creating-a-modal)

You can run `php artisan make:livewire EditUser` to make the initial Livewire component. Open your component class and make sure it extends the `ModalComponent` class:

```