Installation & Setup

Normal onboarding has five steps: install the package, publish config, add modal assets, import the package CSS into your app, and verify everything is wired correctly.

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 because the modal host is a Livewire component. Standalone Blade + Alpine usage is still supported when you do not need to create a Livewire modal class.

Step 1: Install The Package

composer require corepine/modal

This installs the package and registers its service provider.

Step 2: Publish Config

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

This publishes config/corepine-modal.php. Reference page: Configuration

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

<x-corepine.modal.assets />

This host:

Mounts the Livewire modal manager
Listens for modal events
Manages parent/child modal stack state
Moves focus into the active modal panel when a modal opens

Step 4: Import Package CSS Into Your App Build

Import the package stylesheet into your main app CSS so modal styles are compiled through the same Tailwind pipeline as the rest of your app:

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

The package stylesheet includes Tailwind v4 @source paths for the package's views, classes, and config. If you publish config/corepine-modal.php and add custom size classes there, add the published config to your app CSS source list too:

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

Step 5: Understand The Two Runtime Modes

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

If you only use standalone Blade modals, the Livewire host is optional.

Standalone guide: Standalone Blade Modal

Step 6: Rebuild Frontend Assets

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.

Next Step

Build your first modal flow here: Quick Start