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

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

noerd/modal
===========

Open each livewire component in a modal window.

v0.3.11(3w ago)57801proprietaryPHP

Since Jan 31Pushed 3w agoCompare

[ Source](https://github.com/noerd-dev/modal)[ Packagist](https://packagist.org/packages/noerd/modal)[ RSS](/packages/noerd-modal/feed)WikiDiscussions main Synced 2d ago

READMEChangelog (10)Dependencies (6)Versions (25)Used By (1)

noerd/modal
===========

[](#noerdmodal)

**A stacked modal system for Laravel Livewire 4.**
Open any Livewire component in a modal — no traits, no modifications to your livewire component code.

Modals can also be stacked — open another modal from inside an open one with the same `$modal()` call.

[![Stacked modals example](screenshots/animated.gif)](screenshots/animated.gif)

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

[](#installation)

```
composer require noerd/modal
```

Add source path to your resources/css/app.css file

```
@source '../../vendor/noerd/modal/resources/views/**/*.blade.php';
```

Configuration
-------------

[](#configuration)

Add Assets between your head tags.

```

...

...

```

Add Modal Component to your layout. Make sure x-data is set on the body tag or any parent element of the modal component, otherwise the modal won't work.

```

...

```

Example Usage
-------------

[](#example-usage)

Opening a Livewire component in a modal via a button

```

    Open Modal

```

If you want to add parameters to your component which is opened in a modal:

```

    Open Modal

```

```

    {{$name}} {{-- Will display John Doe --}}

```

Stacked Modals
--------------

[](#stacked-modals)

`$modal(...)` works the same way from inside an already-open modal — there is no extra API and no nesting limit. Calling it pushes a new modal onto the stack on top of the current one.

```
{{-- Inside a Livewire component that is itself open in a modal --}}

    Open another modal on top

```

Closing follows LIFO order:

- **ESC** closes only the topmost modal.
- Dispatch `closeTopModal` from PHP/Livewire to close the top modal programmatically.
- Dispatch `closeAllModals` to clear the entire stack at once.

Layering is handled automatically: only the top modal is interactive; modals beneath it are dimmed and slightly scaled down — no styling work required on your end.

Publishing the Example
----------------------

[](#publishing-the-example)

To publish the example components and a demo route, run:

```
php artisan noerd-modal:publish-example
```

This will:

- Copy example components to `resources/views/components/example/`
- Add a route `/noerd-example-modal` to `routes/web.php`

### Example Livewire Starter Kit

[](#example-livewire-starter-kit)

If you are using the [Livewire Starter Kit](https://github.com/laravel/livewire-starter-kit)you can edit the sidebar.blade.php like this example to make noerd modal working

```
>

        @include('partials.head')

```

###  Health Score

43

—

FairBetter than 89% of packages

Maintenance95

Actively maintained with recent releases

Popularity23

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity34

Early-stage or recently created project

 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 ~5 days

Total

24

Last Release

24d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/8ede41d0ea3a95909f1e9a22b682a3b598e8b5c4244c0c1258e5a4ec238524bf?d=identicon)[noerd](/maintainers/noerd)

---

Top Contributors

[![johbrock](https://avatars.githubusercontent.com/u/19673317?v=4)](https://github.com/johbrock "johbrock (72 commits)")

### Embed Badge

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

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

###  Alternatives

[livewire/flux

The official UI component library for Livewire.

9527.8M128](/packages/livewire-flux)[venturedrake/laravel-crm

A free open source CRM built as a package for laravel projects

43311.2k](/packages/venturedrake-laravel-crm)[ramonrietdijk/livewire-tables

Dynamic tables for models with Laravel Livewire

21259.6k](/packages/ramonrietdijk-livewire-tables)[noerd/noerd

101.4k6](/packages/noerd-noerd)[team-nifty-gmbh/tall-datatables

Server-side rendered datatables for Laravel and Livewire

1320.9k4](/packages/team-nifty-gmbh-tall-datatables)[tomshaw/electricgrid

A feature-rich Livewire package designed for projects that require dynamic, interactive data tables.

119.4k](/packages/tomshaw-electricgrid)

PHPackages © 2026

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