PHPackages edulazaro/wiremodal - 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. edulazaro/wiremodal ActiveLibrary[Utility & Helpers](/categories/utility) edulazaro/wiremodal =================== Framework-agnostic modal/dialog system for Laravel, Livewire and Alpine. Pure CSS themes, custom-theme via variables, drop-in API. Sibling of wiretoast. v1.1.0(2w ago)08MITHTMLPHP >=8.2 Since May 17Pushed 2w agoCompare [ Source](https://github.com/edulazaro/wiremodal)[ Packagist](https://packagist.org/packages/edulazaro/wiremodal)[ RSS](/packages/edulazaro-wiremodal/feed)WikiDiscussions main Synced 1w ago READMEChangelog (3)Dependencies (2)Versions (4)Used By (0) wiremodal ========= [](#wiremodal) Framework-agnostic modal/dialog system for Laravel, Livewire and Alpine. Pure CSS themes, custom-theme via CSS variables, drop-in API. Sibling of [wiretoast](https://github.com/edulazaro/wiretoast). 10 themes · 11 sizes · 0 runtime deps · works with or without Livewire/Alpine. Install ------- [](#install) ``` composer require edulazaro/wiremodal php artisan vendor:publish --tag=wiremodal-assets ``` Add to your layout: ``` ``` Or import into your Vite bundle (`resources/css/app.css` + `resources/js/app.js`): ``` @import "../../vendor/edulazaro/wiremodal/resources/css/wiremodal.css"; ``` ``` import '../../vendor/edulazaro/wiremodal/resources/js/wiremodal.js'; ``` Define a modal -------------- [](#define-a-modal) ``` Esta acción no se puede deshacer. Cancelar Eliminar ``` Open / close ------------ [](#open--close) ### Livewire (PHP) [](#livewire-php) ``` $this->openModal('confirm-delete'); $this->openModal('edit-task', ['id' => 42, 'title' => 'Buy milk']); $this->closeModal('confirm-delete'); ``` Under the hood these are macros that dispatch `open-wiremodal` / `close-wiremodal` browser events. If you prefer the raw form: ``` $this->dispatch('open-wiremodal', 'confirm-delete'); $this->dispatch('open-wiremodal', name: 'edit-task', data: ['id' => 42]); $this->dispatch('close-wiremodal', 'confirm-delete'); ``` ### JavaScript (vanilla / Alpine) [](#javascript-vanilla--alpine) ``` Wiremodal.open('confirm-delete'); Wiremodal.open('edit-task', { id: 42, title: 'Buy milk' }); Wiremodal.close('confirm-delete'); Wiremodal.closeAll(); Wiremodal.isOpen('confirm-delete'); ``` `Wiremodal.open()` returns a Promise that resolves with the value passed to `Wiremodal.close(name, result)`: ``` const result = await Wiremodal.open('confirm-delete', { id: 42 }); if (result === 'confirmed') { // user clicked the Eliminar button } ``` Custom events also work directly: ``` window.dispatchEvent(new CustomEvent('open-wiremodal', { detail: 'confirm-delete' })); window.dispatchEvent(new CustomEvent('open-wiremodal', { detail: { name: 'edit-task', data: { id: 42 } } })); window.dispatchEvent(new CustomEvent('close-wiremodal', { detail: 'confirm-delete' })); ``` Legacy event names `open-modal` / `close-modal` are accepted too, useful when migrating from ad-hoc implementations. ### From inside the markup [](#from-inside-the-markup) Any element with `data-wm-dismiss` inside a modal closes it (the built-in close X and overlay use this): ``` Cancel ``` Receive the payload inside the modal ------------------------------------ [](#receive-the-payload-inside-the-modal) The payload passed to `openModal()` / `Wiremodal.open()` is delivered via a `wiremodal:opened` event on the modal element (and on `window`). Read it with Alpine: ``` Cancel Save ``` Or plain JS: ``` window.addEventListener('wiremodal:opened', e => { if (e.detail.name === 'edit-task') { console.log(e.detail.data); } }); ``` Sizes ----- [](#sizes) `xs` 20rem · `sm` 24rem · `md` 28rem · `lg` 32rem · `xl` 36rem · `2xl` 42rem (default) · `3xl` 48rem · `4xl` 56rem · `5xl` 64rem · `6xl` 72rem · `7xl` 80rem. ``` ``` Persistent modals ----------------- [](#persistent-modals) `persistent` modals ignore overlay clicks and ESC. They only close via explicit `data-wm-dismiss` buttons or programmatic `Wiremodal.close()`. Useful for "must confirm" flows or wizards mid-step. ``` ... ``` Block close on unsaved changes ------------------------------ [](#block-close-on-unsaved-changes) The `wiremodal:beforeclose` event is cancelable. Call `event.preventDefault()` to keep the modal open. ``` modal.addEventListener('wiremodal:beforeclose', e => { if (hasUnsavedChanges) { e.preventDefault(); alert('Save or discard your changes first'); } }); ``` The event detail includes `reason`: `'programmatic' | 'dismiss' | 'escape'`. Themes ------ [](#themes) Themes are applied via `[data-wire-theme="..."]` on any ancestor (commonly `` or ``). The same theme name applies across the whole `wire*` family. ThemeVibedefaultNeutral light/dark, follows system`soft`Tinted background, no shadow, friendly`glass`Frosted backdrop blur`gradient`Vivid linear gradient panel, white text`neon`Dark panel, glowing accent border, mono font`minimal`No shadow, left accent stripe`claude`Warm minimal, Anthropic-inspired`chatgpt`Rounded, soft, large radius`synthwave`Retro 80s purple/magenta neon`megaflow`Flowbite-style: clean white card`brutalist`1px black border, hard offset shadow, hover lift``` ``` Dark mode: set `data-wire-theme-mode="dark"` or add `.dark` class to ancestor. Custom theme ------------ [](#custom-theme) Define your own by setting CSS variables on a scope: ``` [data-wire-theme="my-brand"] { --wire-bg: #fff8f0; --wire-text: #2d1810; --wire-accent: #ff6b35; --wire-radius: 8px; --wire-shadow: 0 12px 32px rgba(45, 24, 16, 0.12); } ``` For modal-specific overrides, use `--wm-*` variables (see `wiremodal.css` for the full list). Anatomy ------- [](#anatomy) ``` .wm-modal[data-wm-name][data-wm-state="open|closed"][data-wm-size][data-wm-fullscreen][data-wm-persistent] .wm-overlay[data-wm-dismiss] .wm-panel .wm-header .wm-title .wm-close[data-wm-dismiss] .wm-body .wm-footer ``` Lifecycle events (fire on both modal element and window): EventCancelable`detail``wiremodal:beforeclose`yes`{ name, reason }``wiremodal:opened`no`{ name, data }``wiremodal:closed`no`{ name, result }`License ------- [](#license) MIT. Edu Lazaro. ### Health Score 41 — FairBetter than 87% of packages Maintenance96 Actively maintained with recent releases Popularity7 Limited adoption so far Community6 Small or concentrated contributor base Maturity48 Maturing project, gaining track record 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 ~2 days Total 3 Last Release 19d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/6a3c47449dfb2ec121aa410da024f47586b87cc2799a825f0418e6c5e5904955?d=identicon)[edulazaro](/maintainers/edulazaro) --- Top Contributors [![edulazaro](https://avatars.githubusercontent.com/u/7797530?v=4)](https://github.com/edulazaro "edulazaro (4 commits)") --- Tags laraveluilivewiremodalalpinedialog ### Embed Badge ![Health badge](/badges/edulazaro-wiremodal/health.svg) ``` [![Health](https://phpackages.com/badges/edulazaro-wiremodal/health.svg)](https://phpackages.com/packages/edulazaro-wiremodal) ``` ### Alternatives [psalm/plugin-laravel Psalm plugin for Laravel 3325.1M337](/packages/psalm-plugin-laravel)[livewire/flux The official UI component library for Livewire. 9466.8M119](/packages/livewire-flux)[moonshine/moonshine Laravel administration panel 1.3k239.9k72](/packages/moonshine-moonshine)[ympact/flux-icons A package to provide icons from different vendors for Livewire Flux. 118.7k](/packages/ympact-flux-icons)[tanthammar/livewire-window-size Laravel blade directives and php helpers for serverside rendered content, based on browser window size WITHOUT css. Requires Livewire and AlpineJS 2323.1k](/packages/tanthammar-livewire-window-size)[grafite/forms A remarkably magical form package for Laravel. 376.8k1](/packages/grafite-forms) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)