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.2.9(1mo ago)42531proprietaryPHP

Since Jan 31Pushed 1mo agoCompare

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

READMEChangelog (10)Dependencies (2)Versions (14)Used By (1)

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

[](#noerdmodal)

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

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 --}}

```

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

39

—

LowBetter than 86% of packages

Maintenance89

Actively maintained with recent releases

Popularity20

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity31

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

Total

13

Last Release

52d 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 (45 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.

9385.0M86](/packages/livewire-flux)[livewire/volt

An elegantly crafted functional API for Laravel Livewire.

4195.3M84](/packages/livewire-volt)[jantinnerezo/livewire-alert

This package provides a simple alert utilities for your livewire components.

8041.2M20](/packages/jantinnerezo-livewire-alert)[leandrocfe/filament-apex-charts

Apex Charts integration for Filament PHP.

4861.2M8](/packages/leandrocfe-filament-apex-charts)[spatie/laravel-livewire-wizard

Build wizards using Livewire

4061.0M4](/packages/spatie-laravel-livewire-wizard)[spatie/laravel-dashboard

A dashboard for Laravel

568156.1k94](/packages/spatie-laravel-dashboard)

PHPackages © 2026

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