php-flasher/docs/pages/livewire.html

---
permalink: /livewire/
title: Livewire
description: Learn how to add flash notifications to your Livewire application using PHPFlasher. This guide walks you through installation and usage, so you can engage your users with informative messages.
adapter: flasher
---

<div class="max-w-7xl mx-auto">
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <!-- Table of contents - Desktop -->
        <div class="w-full bg-white border-b border-slate-100">
            <div class="px-2 py-4 flex items-center gap-4 overflow-x-auto no-scrollbar">
                <a href="#requirements" class="text-sm font-medium text-slate-600 hover:text-indigo-600 whitespace-nowrap transition-colors">Requirements</a>
                <span class="text-slate-200">|</span>
                <a href="#installation" class="text-sm font-medium text-slate-600 hover:text-indigo-600 whitespace-nowrap transition-colors">Installation</a>
                <span class="text-slate-200">|</span>
                <a href="#usage" class="text-sm font-medium text-slate-600 hover:text-indigo-600 whitespace-nowrap transition-colors">Usage</a>
                <span class="text-slate-200">|</span>
                <a href="#events" class="text-sm font-medium text-slate-600 hover:text-indigo-600 whitespace-nowrap transition-colors">Events</a>
            </div>
        </div>

        <!-- Content area -->
        <div class="prose prose-slate max-w-none p-6 md:p-8">
            <!-- Requirements Section -->
            <div id="requirements" class="scroll-mt-20">
                <h2 class="text-2xl font-bold text-slate-800 mb-4">Requirements</h2>
                <p class="mb-4">
                    <strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>
                    works seamlessly with <strong>Livewire v3</strong>, bringing dynamic flash notifications to your reactive components.
                </p>

                <!-- Version requirements -->
                <div class="mb-5">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <!-- PHP Card -->
                        <div class="bg-white rounded-lg border border-slate-200 p-4">
                            <div class="flex items-center">
                                <div class="bg-indigo-100 rounded-full h-10 w-10 flex items-center justify-center">
                                    <i class="fa-brands fa-php text-indigo-600 text-lg"></i>
                                </div>
                                <div class="ml-3">
                                    <div class="text-xs uppercase tracking-wider text-slate-500 font-medium">Required</div>
                                    <h4 class="font-semibold text-slate-800">PHP Version</h4>
                                    <div class="inline-block px-2 py-0.5 bg-slate-100 text-slate-700 text-xs font-medium rounded-full mt-1">
                                        v8.2 or higher
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Livewire Card -->
                        <div class="bg-white rounded-lg border border-slate-200 p-4">
                            <div class="flex items-center">
                                <div class="bg-purple-600 rounded-full h-10 w-10 flex items-center justify-center">
                                    <i class="fa-solid fa-bolt text-white text-lg"></i>
                                </div>
                                <div class="ml-3">
                                    <div class="text-xs uppercase tracking-wider text-slate-500 font-medium">Required</div>
                                    <h4 class="font-semibold text-slate-800">Livewire</h4>
                                    <div class="inline-block px-2 py-0.5 bg-slate-100 text-slate-700 text-xs font-medium rounded-full mt-1">
                                        v3.0 or higher
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Legacy version note -->
                    <div class="bg-amber-50 border-l-4 border-amber-400 rounded-r-lg p-4 mt-4">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fa-solid fa-lightbulb text-amber-500 mt-0.5"></i>
                            </div>
                            <div class="ml-3">
                                <h4 class="text-sm font-medium text-amber-800">Using older PHP or Livewire versions?</h4>
                                <p class="text-sm text-amber-700 mt-1">
                                    If you need to use PHP &lt; v8.2 or Livewire &lt; v3.0, use
                                    <strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span> v1</strong> instead.
                                    It supports PHP ≥ v5.3 and earlier Livewire versions.
                                    <a href="https://php-flasher.github.io/" class="text-amber-800 underline hover:text-amber-900">
                                        Check out the v1 documentation here
                                    </a>.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Installation Section -->
            <div id="installation" class="mt-10 scroll-mt-20">
                <h2 class="text-2xl font-bold text-slate-800 mb-4">Installation</h2>
                <p class="mb-4">
                    To use <strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong> with Livewire, follow the same installation steps as in the
                    <a href="/laravel" class="text-indigo-600 hover:text-indigo-800">Laravel Installation</a> guide.
                </p>

                <!-- Terminal code block -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-4">
                    <div class="bg-slate-800 px-4 py-3 flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="flex space-x-1.5 mr-3">
                                <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                                <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                                <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                            </div>
                            <span class="text-white text-sm">Terminal</span>
                        </div>
                        <div class="text-slate-400 text-sm">Installation</div>
                    </div>

                    <div class="p-4 bg-slate-900">
                        <pre class="text-sm text-slate-200"><code class="language-bash">composer require php-flasher/flasher-laravel</code></pre>
                    </div>
                </div>

                <p class="mb-4">After installing, run this command to set up the required assets:</p>

                <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="flex space-x-1.5 mr-3">
                                <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                                <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                                <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                            </div>
                            <span class="text-white text-sm">Terminal</span>
                        </div>
                        <div class="text-slate-400 text-sm">Setup Assets</div>
                    </div>

                    <div class="p-4 bg-slate-900">
                        <pre class="text-sm text-slate-200"><code class="language-bash">php artisan flasher:install</code></pre>
                    </div>
                </div>

                <!-- Integration callout -->
                <div class="bg-slate-50 border-l-4 border-purple-500 rounded-r-lg p-4 mb-6">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <i class="fa-solid fa-bolt text-purple-600 mt-0.5"></i>
                        </div>
                        <div class="ml-3">
                            <h4 class="text-sm font-medium text-slate-800">Zero Configuration for Livewire</h4>
                            <p class="text-sm text-slate-600 mt-1">
                                PHPFlasher automatically integrates with Livewire. No additional configuration needed - flash notifications work instantly across component updates and page refreshes.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Usage Section -->
            <div id="usage" class="mt-10 scroll-mt-20">
                <h2 class="text-2xl font-bold text-slate-800 mb-4">Usage</h2>

                <p class="mb-4">
                    Using <strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>
                    in Livewire components is simple. Just call the <code class="bg-slate-200 px-2 py-1 rounded text-slate-700">flash()</code>
                    helper function in your component methods.
                </p>

                <!-- Basic Usage Example -->
                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Basic Usage</h3>
                <p class="mb-4">Dispatch notifications from your Livewire components:</p>

                <!-- PHP Example -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white text-sm">UserComponent.php</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">&lt;?php

namespace App\Livewire;

use Livewire\Component;

class UserComponent extends Component
{
    public function save()
    {
        // Save user logic here...

        // Show success notification
        flash()->success('User saved successfully!');
    }

    public function render()
    {
        return view('livewire.user');
    }
}</code></pre>
                    </div>
                </div>

                <!-- Pro tip box -->
                <div class="bg-slate-50 rounded-lg p-4 mb-6 border border-slate-200">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <i class="fa-solid fa-lightbulb text-amber-500 mt-0.5"></i>
                        </div>
                        <div class="ml-3">
                            <h4 class="text-sm font-medium text-slate-800">Pro Tip: Notifications Persist Across Livewire Updates</h4>
                            <p class="text-sm text-slate-600 mt-1">
                                PHPFlasher automatically handles Livewire component updates and page refreshes. Notifications will display correctly even during partial page updates.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Complete component example -->
                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Complete Component Example</h3>
                <p class="mb-4">Here's a more complete example of a Livewire component with form handling and notifications:</p>

                <!-- PHP Example -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white text-sm">ContactForm.php</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">&lt;?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Contact;

class ContactForm extends Component
{
    public $name = '';
    public $email = '';
    public $message = '';

    protected $rules = [
        'name' => 'required|min:3',
        'email' => 'required|email',
        'message' => 'required|min:10',
    ];

    public function submit()
    {
        $this->validate();

        try {
            Contact::create([
                'name' => $this->name,
                'email' => $this->email,
                'message' => $this->message,
            ]);

            // Success notification
            flash()->success('Your message has been sent!', 'Thank you');

            // Reset form
            $this->reset(['name', 'email', 'message']);

        } catch (\Exception $e) {
            // Error notification
            flash()->error('There was a problem sending your message.');
        }
    }

    public function render()
    {
        return view('livewire.contact-form');
    }
}</code></pre>
                    </div>
                </div>

                <!-- Related Blade view -->
                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">The Blade View</h3>
                <p class="mb-4">Here's the corresponding Blade view for the component:</p>

                <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white text-sm">contact-form.blade.php</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-html">&lt;div&gt;
    &lt;form wire:submit.prevent="submit" class="space-y-4"&gt;
        &lt;div&gt;
            &lt;label for="name" class="block text-sm font-medium text-gray-700"&gt;Name&lt;/label&gt;
            &lt;input type="text" id="name" wire:model="name"
                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm"&gt;
            @error('name') &lt;span class="text-red-500 text-xs"&gt;{% raw %}{{ $message }}{% endraw %}&lt;/span&gt; @enderror
        &lt;/div&gt;

        &lt;div&gt;
            &lt;label for="email" class="block text-sm font-medium text-gray-700"&gt;Email&lt;/label&gt;
            &lt;input type="email" id="email" wire:model="email"
                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm"&gt;
            @error('email') &lt;span class="text-red-500 text-xs"&gt;{% raw %}{{ $message }}{% endraw %}&lt;/span&gt; @enderror
        &lt;/div&gt;

        &lt;div&gt;
            &lt;label for="message" class="block text-sm font-medium text-gray-700"&gt;Message&lt;/label&gt;
            &lt;textarea id="message" wire:model="message" rows="4"
                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm"&gt;&lt;/textarea&gt;
            @error('message') &lt;span class="text-red-500 text-xs"&gt;{% raw %}{{ $message }}{% endraw %}&lt;/span&gt; @enderror
        &lt;/div&gt;

        &lt;div&gt;
            &lt;button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent
                shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700
                focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"&gt;
                &lt;div wire:loading wire:target="submit" class="mr-2"&gt;
                    &lt;svg class="animate-spin h-4 w-4 text-white" fill="none" viewBox="0 0 24 24"&gt;
                        &lt;circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"&gt;&lt;/circle&gt;
                        &lt;path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"&gt;&lt;/path&gt;
                    &lt;/svg&gt;
                &lt;/div&gt;
                Send Message
            &lt;/button&gt;
        &lt;/div&gt;
    &lt;/form&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </div>

                <!-- Notification Types -->
                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">All Notification Types</h3>
                <p class="mb-4">You can use all the standard notification types in your Livewire components:</p>

                <!-- Notification types showcase -->
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 my-6">
                    <div class="p-4 border border-slate-200 rounded-lg bg-white">
                        <div class="flex items-center gap-3 mb-2 text-green-700">
                            <i class="fa-solid fa-circle-check"></i>
                            <strong class="text-slate-800">Success</strong>
                        </div>
                        <p class="text-slate-600 text-sm">flash()->success('Record updated successfully!')</p>
                    </div>

                    <div class="p-4 border border-slate-200 rounded-lg bg-white">
                        <div class="flex items-center gap-3 mb-2 text-red-600">
                            <i class="fa-solid fa-circle-exclamation"></i>
                            <strong class="text-slate-800">Error</strong>
                        </div>
                        <p class="text-slate-600 text-sm">flash()->error('An error occurred while saving.')</p>
                    </div>

                    <div class="p-4 border border-slate-200 rounded-lg bg-white">
                        <div class="flex items-center gap-3 mb-2 text-amber-600">
                            <i class="fa-solid fa-triangle-exclamation"></i>
                            <strong class="text-slate-800">Warning</strong>
                        </div>
                        <p class="text-slate-600 text-sm">flash()->warning('Unsaved changes will be lost.')</p>
                    </div>

                    <div class="p-4 border border-slate-200 rounded-lg bg-white">
                        <div class="flex items-center gap-3 mb-2 text-indigo-600">
                            <i class="fa-solid fa-circle-info"></i>
                            <strong class="text-slate-800">Info</strong>
                        </div>
                        <p class="text-slate-600 text-sm">flash()->info('Your session will expire in 5 minutes.')</p>
                    </div>
                </div>
            </div>

            <!-- Events Section -->
            <div id="events" class="mt-10 scroll-mt-20">
                <h2 class="text-2xl font-bold text-slate-800 mb-4">Events</h2>

                <p class="mb-4">
                    PHPFlasher integrates with Livewire's event system, allowing you to listen for notification events in your components.
                    This is particularly useful for interactive notifications like SweetAlert confirmations.
                </p>

                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">SweetAlert Events</h3>
                <p class="mb-4">
                    For SweetAlert, you can listen to <code class="bg-slate-200 px-2 py-1 rounded text-slate-700">sweetalert:confirmed</code>,
                    <code class="bg-slate-200 px-2 py-1 rounded text-slate-700">sweetalert:denied</code>, and
                    <code class="bg-slate-200 px-2 py-1 rounded text-slate-700">sweetalert:dismissed</code> events within your component.
                </p>

                <!-- Interactive example -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white text-sm">UserDeleteComponent.php</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">&lt;?php

namespace App\Livewire;

use Livewire\Attributes\On;
use Livewire\Component;

class UserComponent extends Component
{
    public function render()
    {
        return <<<'HTML'
            &lt;div&gt;
                &lt;button wire:click="deleteUser"&gt;Delete User&lt;/button&gt;
            &lt;/div&gt;
        HTML;
    }

    public function deleteUser()
    {
        sweetalert()
            ->showDenyButton()
            ->info('Are you sure you want to delete the user?');
    }

    #[On('sweetalert:confirmed')]
    public function onConfirmed(array $payload): void
    {
        // Delete the user here

        flash()->info('User successfully deleted.');
    }

    #[On('sweetalert:denied')]
    public function onDeny(array $payload): void
    {
        flash()->info('Deletion cancelled.');
    }
}</code></pre>
                    </div>
                </div>

                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Toastr Events</h3>
                <p class="mb-4">
                    For Toastr notifications, you can listen to the following events:
                </p>

                <div class="overflow-x-auto mb-6">
                    <table class="min-w-full bg-white border border-slate-200 rounded-lg">
                        <thead class="bg-slate-50">
                            <tr>
                                <th class="px-4 py-3 text-left text-sm font-semibold text-slate-700 border-b">Event</th>
                                <th class="px-4 py-3 text-left text-sm font-semibold text-slate-700 border-b">Description</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-200">
                            <tr>
                                <td class="px-4 py-3"><code class="bg-slate-100 px-2 py-1 rounded text-sm">toastr:click</code></td>
                                <td class="px-4 py-3 text-sm text-slate-600">Fired when user clicks the notification</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-3"><code class="bg-slate-100 px-2 py-1 rounded text-sm">toastr:close</code></td>
                                <td class="px-4 py-3 text-sm text-slate-600">Fired when notification is closed by user</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-3"><code class="bg-slate-100 px-2 py-1 rounded text-sm">toastr:show</code></td>
                                <td class="px-4 py-3 text-sm text-slate-600">Fired when notification is shown</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-3"><code class="bg-slate-100 px-2 py-1 rounded text-sm">toastr:hidden</code></td>
                                <td class="px-4 py-3 text-sm text-slate-600">Fired when notification is hidden</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- Toastr Example -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white text-sm">ToastrEventsComponent.php</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">&lt;?php

namespace App\Livewire;

use Livewire\Attributes\On;
use Livewire\Component;

class ToastrEventsComponent extends Component
{
    #[On('toastr:click')]
    public function onToastrClick(array $payload): void
    {
        // Handle notification click
    }

    #[On('toastr:close')]
    public function onToastrClose(array $payload): void
    {
        // Handle notification close
    }

    #[On('toastr:show')]
    public function onToastrShow(array $payload): void
    {
        // Handle notification shown
    }

    #[On('toastr:hidden')]
    public function onToastrHidden(array $payload): void
    {
        // Handle notification hidden
    }
}</code></pre>
                    </div>
                </div>

                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Noty Events</h3>
                <p class="mb-4">
                    For Noty notifications, you can listen to the following events:
                </p>

                <div class="overflow-x-auto mb-6">
                    <table class="min-w-full bg-white border border-slate-200 rounded-lg">
                        <thead class="bg-slate-50">
                            <tr>
                                <th class="px-4 py-3 text-left text-sm font-semibold text-slate-700 border-b">Event</th>
                                <th class="px-4 py-3 text-left text-sm font-semibold text-slate-700 border-b">Description</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-200">
                            <tr>
                                <td class="px-4 py-3"><code class="bg-slate-100 px-2 py-1 rounded text-sm">noty:click</code></td>
                                <td class="px-4 py-3 text-sm text-slate-600">Fired when user clicks the notification</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-3"><code class="bg-slate-100 px-2 py-1 rounded text-sm">noty:close</code></td>
                                <td class="px-4 py-3 text-sm text-slate-600">Fired when notification is closed</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-3"><code class="bg-slate-100 px-2 py-1 rounded text-sm">noty:show</code></td>
                                <td class="px-4 py-3 text-sm text-slate-600">Fired when notification is shown</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-3"><code class="bg-slate-100 px-2 py-1 rounded text-sm">noty:hover</code></td>
                                <td class="px-4 py-3 text-sm text-slate-600">Fired when user hovers over the notification</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Notyf Events</h3>
                <p class="mb-4">
                    For Notyf notifications, you can listen to the following events:
                </p>

                <div class="overflow-x-auto mb-6">
                    <table class="min-w-full bg-white border border-slate-200 rounded-lg">
                        <thead class="bg-slate-50">
                            <tr>
                                <th class="px-4 py-3 text-left text-sm font-semibold text-slate-700 border-b">Event</th>
                                <th class="px-4 py-3 text-left text-sm font-semibold text-slate-700 border-b">Description</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-200">
                            <tr>
                                <td class="px-4 py-3"><code class="bg-slate-100 px-2 py-1 rounded text-sm">notyf:click</code></td>
                                <td class="px-4 py-3 text-sm text-slate-600">Fired when user clicks the notification</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-3"><code class="bg-slate-100 px-2 py-1 rounded text-sm">notyf:dismiss</code></td>
                                <td class="px-4 py-3 text-sm text-slate-600">Fired when notification is dismissed</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Theme Events</h3>
                <p class="mb-4">
                    For PHPFlasher built-in themes, you can listen to the following events. Two types of events are dispatched:
                    a generic event and a theme-specific event.
                </p>

                <div class="overflow-x-auto mb-6">
                    <table class="min-w-full bg-white border border-slate-200 rounded-lg">
                        <thead class="bg-slate-50">
                            <tr>
                                <th class="px-4 py-3 text-left text-sm font-semibold text-slate-700 border-b">Event</th>
                                <th class="px-4 py-3 text-left text-sm font-semibold text-slate-700 border-b">Description</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-200">
                            <tr>
                                <td class="px-4 py-3"><code class="bg-slate-100 px-2 py-1 rounded text-sm">theme:click</code></td>
                                <td class="px-4 py-3 text-sm text-slate-600">Generic event fired when any theme notification is clicked</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-3"><code class="bg-slate-100 px-2 py-1 rounded text-sm">theme:{name}:click</code></td>
                                <td class="px-4 py-3 text-sm text-slate-600">Specific event fired for a particular theme (e.g., <code class="bg-slate-100 px-1 rounded text-xs">theme:flasher:click</code>)</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- Theme Example -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white text-sm">ThemeEventsComponent.php</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">&lt;?php

namespace App\Livewire;

use Livewire\Attributes\On;
use Livewire\Component;

class ThemeEventsComponent extends Component
{
    // Listen to clicks on any theme notification
    #[On('theme:click')]
    public function onThemeClick(array $payload): void
    {
        // Handle notification click
    }

    // Listen to clicks on a specific theme (e.g., 'flasher')
    #[On('theme:flasher:click')]
    public function onFlasherThemeClick(array $payload): void
    {
        // Handle flasher theme notification click
    }
}</code></pre>
                    </div>
                </div>

                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Event Payload</h3>
                <p class="mb-4">Each listener method accepts an <code class="bg-slate-200 px-2 py-1 rounded text-slate-700">array $payload</code> parameter, which contains:</p>

                <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white text-sm">PayloadStructure.php</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">public function sweetalertConfirmed(array $payload)
{
    // Access the payload data
    $promise = $payload['promise'];
    $envelope = $payload['envelope'];

    // $promise - Contains the resolved promise data from SweetAlert
    // $envelope - Contains the notification where the event happened

    // You can use this data for further processing
    $userId = $envelope->getOption('userId'); // If you had set this option
}</code></pre>
                    </div>
                </div>

                <!-- Best practices -->
                <div class="bg-slate-50 border-l-4 border-green-500 rounded-r-lg p-4 mb-6">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <i class="fa-solid fa-check-circle text-green-600 mt-0.5"></i>
                        </div>
                        <div class="ml-3">
                            <h4 class="text-sm font-medium text-slate-800">Best Practice: Use Attributes for Events</h4>
                            <p class="text-sm text-slate-600 mt-1">
                                With Livewire 3, use the new <code class="bg-slate-200 px-1 py-0.5 rounded text-slate-700">#[On('event')]</code> attribute syntax
                                for cleaner event handling. This makes your code more readable and follows modern PHP practices.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Advanced example -->
                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Advanced Example: CRUD Operations</h3>
                <p class="mb-4">Here's a more complete example showing how to implement CRUD operations with confirmations:</p>

                <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white text-sm">TasksComponent.php</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">&lt;?php

namespace App\Livewire;

use App\Models\Task;
use Livewire\Attributes\On;
use Livewire\Component;

class TasksComponent extends Component
{
    public $tasks = [];
    public $taskToDelete = null;

    public $title = '';
    public $description = '';

    protected $rules = [
        'title' => 'required|min:3',
        'description' => 'required',
    ];

    public function mount()
    {
        $this->tasks = Task::latest()->get();
    }

    public function saveTask()
    {
        $this->validate();

        Task::create([
            'title' => $this->title,
            'description' => $this->description,
        ]);

        $this->reset(['title', 'description']);
        $this->tasks = Task::latest()->get();

        flash()->success('Task created successfully!');
    }

    public function confirmDelete($taskId)
    {
        $this->taskToDelete = $taskId;

        sweetalert()
            ->showDenyButton()
            ->option('confirmButtonText', 'Yes, delete it!')
            ->option('denyButtonText', 'Cancel')
            ->option('taskId', $taskId) // Store taskId in the options
            ->warning('Are you sure you want to delete this task?', 'Confirm Deletion');
    }

    #[On('sweetalert:confirmed')]
    public function deleteTask(array $payload)
    {
        $task = Task::find($this->taskToDelete);

        if ($task) {
            $task->delete();
            $this->tasks = Task::latest()->get();
            flash()->success('Task deleted successfully!');
        } else {
            flash()->error('Task not found.');
        }

        $this->taskToDelete = null;
    }

    #[On('sweetalert:denied')]
    public function cancelDelete()
    {
        $this->taskToDelete = null;
        flash()->info('Task deletion cancelled.');
    }

    public function render()
    {
        return view('livewire.tasks', [
            'tasks' => $this->tasks
        ]);
    }
}</code></pre>
                    </div>
                </div>

                <!-- Tips for working with Livewire component -->
                <div class="bg-slate-50 border border-slate-200 rounded-xl p-6 mb-6">
                    <div class="flex items-start">
                        <div class="flex-shrink-0 p-2 bg-indigo-100 rounded-full">
                            <i class="fa-solid fa-wand-magic-sparkles text-indigo-600"></i>
                        </div>
                        <div class="ml-4">
                            <h4 class="text-lg font-semibold text-slate-800">Tips for Livewire Integration</h4>
                            <ul class="mt-2 space-y-2 text-slate-600">
                                <li class="flex items-start">
                                    <i class="fa-solid fa-check text-green-500 mr-2 mt-1"></i>
                                    <span>Use <code class="bg-slate-200 px-1.5 py-0.5 rounded text-slate-700">wire:ignore</code> on notification container elements if you're manually placing them</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa-solid fa-check text-green-500 mr-2 mt-1"></i>
                                    <span>Notifications persist across Livewire updates and work with both full page refreshes and SPA navigation</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa-solid fa-check text-green-500 mr-2 mt-1"></i>
                                    <span>You can pass dynamic data to your notifications using component properties</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa-solid fa-check text-green-500 mr-2 mt-1"></i>
                                    <span>Store temporary state (like IDs for confirmation dialogs) in component properties</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- SPA Mode -->
                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Working with Livewire SPA Mode</h3>
                <p class="mb-4">
                    PHPFlasher works seamlessly with Livewire's SPA (Single Page Application) mode, ensuring notifications are displayed correctly
                    during page transitions without reloading.
                </p>

                <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white text-sm">nav-link.blade.php</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-html">&lt;a href="{% raw %}{{ route('dashboard') }}{% endraw %}" wire:navigate&gt;Dashboard&lt;/a&gt;

&lt;!-- In your component --&gt;
&lt;script&gt;
// PHPFlasher's notifications will persist during SPA navigation
Livewire.hook('commit', ({ component }) => {
    // Any custom code that needs to run after component updates
    // PHPFlasher will automatically handle the notifications
});
&lt;/script&gt;</code></pre>
                    </div>
                </div>

                <!-- Event chaining with confirmations -->
                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Chaining Notifications with Events</h3>
                <p class="mb-4">
                    You can create complex interaction flows by chaining notifications with events:
                </p>

                <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white text-sm">PublishArticle.php</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">&lt;?php

namespace App\Livewire;

use Livewire\Attributes\On;
use Livewire\Component;

class PublishArticle extends Component
{
    public $article;

    public function confirmPublish()
    {
        sweetalert()
            ->option('title', 'Publish article?')
            ->option('icon', 'question')
            ->option('showCancelButton', true)
            ->option('confirmButtonText', 'Yes, publish it!')
            ->option('cancelButtonText', 'Not yet')
            ->question('Are you sure you want to publish this article?');
    }

    #[On('sweetalert:confirmed')]
    public function publishArticle()
    {
        // Publish the article
        $this->article->published = true;
        $this->article->save();

        // First notification
        flash()->success('Article published successfully!');

        // Second notification (after a delay)
        sweetalert()
            ->timer(3000)
            ->option('showCancelButton', true)
            ->option('confirmButtonText', 'Yes, share it!')
            ->option('cancelButtonText', 'No thanks')
            ->option('actionType', 'share') // Custom option to identify action
            ->question('Do you want to share this article?');
    }

    #[On('sweetalert:confirmed')]
    public function handleConfirmation(array $payload)
    {
        $envelope = $payload['envelope'];
        $actionType = $envelope->getOption('actionType');

        if ($actionType === 'share') {
            // Show sharing UI
            $this->dispatch('show-share-modal', articleId: $this->article->id);
        }
    }

    public function render()
    {
        return view('livewire.publish-article');
    }
}</code></pre>
                    </div>
                </div>
            </div>

            <!-- Additional Integration section -->
            <div id="additional-integrations" class="mt-10 scroll-mt-20">
                <h2 class="text-2xl font-bold text-slate-800 mb-4">Additional Integrations</h2>

                <p class="mb-4">
                    PHPFlasher works with other popular Livewire plugins and Laravel features.
                </p>

                <!-- Alpine.js integration -->
                <div class="mb-6">
                    <div class="bg-white rounded-lg p-5 border border-slate-200 shadow-sm mb-4">
                        <div class="flex items-center mb-3">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                                <svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M8.11 20.259L14.997 3.75l1.305.75-6.888 16.509z"></path>
                                    <path d="M2.783 9.75L7.875 4.658 9.292 6.08 4.205 11.17zM14.713 17.926l5.091-5.092 1.424 1.425-5.091 5.091z"></path>
                                </svg>
                            </div>
                            <h3 class="font-semibold text-slate-800">Alpine.js Integration</h3>
                        </div>
                        <p class="text-slate-600 text-sm mb-3">
                            PHPFlasher works perfectly with Alpine.js directives in your Livewire components.
                        </p>
<pre class="bg-slate-50 rounded-lg p-3 text-xs overflow-x-auto"><code class="language-html">&lt;div x-data="{ show: false }"&gt;
    &lt;button x-on:click="show = true; $wire.showToast()"&gt;
        Show Toast
    &lt;/button&gt;
&lt;/div&gt;</code></pre>
                    </div>

                    <div class="bg-white rounded-lg p-5 border border-slate-200 shadow-sm">
                        <div class="flex items-center mb-3">
                            <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
                                <svg class="w-5 h-5 text-red-600" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12.4217 4L17.5 12.9429L12.4217 18.0571H7.49975L2.5 11.9429L7.49975 4H12.4217ZM11.3929 5.71429H8.44647L5.5 11.0143L8.44647 16.3429H11.3929L14.4643 11.0143L11.3929 5.71429Z"></path>
                                    <path d="M15.5 5.71429L18.5 11.0143L15.5 16.3429H21.5L18.5 11.0143L21.5 5.71429H15.5Z"></path>
                                </svg>
                            </div>
                            <h3 class="font-semibold text-slate-800">Laravel Blade Integration</h3>
                        </div>
                        <p class="text-slate-600 text-sm mb-3">
                            Mix Blade directives with Livewire and PHPFlasher notifications.
                        </p>
<pre class="bg-slate-50 rounded-lg p-3 text-xs overflow-x-auto"><code class="language-php">@if (session('status'))
    &lt;script&gt;
        document.addEventListener('livewire:initialized', () => {
            flasher.success('{% raw %}{{ session('status') }}{% endraw %}');
        });
    &lt;/script&gt;
@endif</code></pre>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>