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

ActiveLibrary

sobitnl/livewire-modal-sheet
============================

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

1.0.0(3mo ago)02MITPHPPHP ^8.2

Since Jan 21Pushed 3mo agoCompare

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

READMEChangelogDependencies (3)Versions (2)Used By (0)

Livewire Modal Sheet
====================

[](#livewire-modal-sheet)

[![Alt bottom sheet illustration](/assets/bottom-sheet-optimized.gif)](/assets/bottom-sheet-optimized.gif)

A Livewire 4 modal/bottom-sheet component that supports multiple child modals while maintaining state.

[![Total Downloads Livewire Modal Sheet](https://camo.githubusercontent.com/cee57136b0ec0f85de61c2b898fce8f3f55f7ec53db2e23d300aaa23264307eb/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f736f6269746e6c2f6c697665776972652d6d6f64616c2d7368656574)](https://packagist.org/packages/sobitnl/livewire-modal-sheet)[![Latest Stable Version Livewire Modal Sheet](https://camo.githubusercontent.com/e3233766b4173ddc6ccdda27588c86d0a001615817a692147a369b4946390611/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f736f6269746e6c2f6c697665776972652d6d6f64616c2d7368656574)](https://packagist.org/packages/sobitnl/livewire-modal-sheet)[![License Livewire Modal Sheet](https://camo.githubusercontent.com/3a7de1cb7de101ffdb27bb0d461ab94f2d208385943c136a5bf0651803b9d198/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f736f6269746e6c2f6c697665776972652d6d6f64616c2d7368656574)](https://packagist.org/packages/sobitnl/livewire-modal-sheet)

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

[](#installation)

```
composer require sobitnl/livewire-modal-sheet
```

Setup
-----

[](#setup)

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

```

    @livewire('livewire-modal-sheet')

```

### TailwindCSS

[](#tailwindcss)

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

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

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

[](#creating-a-modal)

Create a Livewire component that extends `ModalComponent`:

```