Quick Start

Build your first modal with a small read-only Livewire component.

Corepine stack modals are normal Livewire components with one main difference: the component extends Corepine\Modal\Modal.

Step 1: Create A Livewire Component

php artisan make:livewire welcome-modal

This creates a Livewire component at:

resources/views/components/⚡welcome-modal.blade.php

Update that file with a simple modal:

<?php

use Corepine\Modal\Actions\Action;
use Corepine\Modal\Modal;

new class extends Modal
{
    public static function modalAttributes(): array
    {
        return [
            'heading' => 'Welcome',
            'description' => 'This modal is rendered from a Livewire component.',
            'actions' => [
                Action::make('done')
                    ->label('Done')
                    ->primary()
                    ->close(),
            ],
        ];
    }
};
?>

<div class="space-y-3">
    <p>
        Use this pattern for modal content that should be mounted, updated, and
        closed through Livewire.
    </p>
</div>

Use the Blade open helper where you want the trigger to appear:

<x-corepine.modal.actions.open component="welcome-modal">
    <button type="button">
        Open Modal
    </button>
</x-corepine.modal.actions.open>

The helper sends the correct modal event for the stack host and keeps the trigger reusable across normal page loads and Livewire navigation.

Step 3: Add The Host Once

Render the modal host once in your app layout, usually before </body>:

<x-corepine.modal.assets />

If you already added the host during installation, keep one copy and continue.

Secure Actions

The quick start modal is intentionally read-only.

When a modal reads protected data, updates records, deletes records, or performs security-sensitive work, add the same Laravel authorization and validation checks you would use in any Livewire component.

Security guide: Security

Customize behavior, layout, and styling here: Modal Attributes