Installation

Install Corepine Modal with Composer, add the modal host, and import the package stylesheet.

Requirements

Laravel Version 11 or later Livewire Version 3.7 or later Tailwind CSS Version 4.0 or later

Livewire is required for stack mode. Standalone Blade + Alpine usage is supported when you do not need a Livewire modal class.

composer require corepine/modal

If you use stack mode, render the modal host once in your main layout, usually before </body>:

<x-corepine.modal.assets />

The host mounts the Livewire modal manager and listens for modal events.

Import the package stylesheet into your main app CSS:

@import "../../vendor/corepine/modal/resources/css/app.css";

The package stylesheet already includes Tailwind v4 @source paths for the package views, classes, and default config.

Livewire stack mode: open Livewire modal components and support child modals stacked above parent modals
Standalone Blade mode: render <x-corepine.modal /> directly and control it with browser events

For standalone Blade modals only, the Livewire host is optional.

If you imported package CSS into your app stylesheet, rebuild your frontend assets:

npm run dev

If styles still look unchanged, restart the watcher once.

Publish the config when you need to change default modal attributes, event names, sizes, or close button behavior:

php artisan vendor:publish --tag=corepine-modal-config

This creates config/corepine-modal.php. See the full reference on the Configuration page.

If you add custom size classes to the published config, include that file in your app CSS source list:

@source "../../config/corepine-modal.php";

Build your first modal flow here: Quick Start