sileo-livewire

Sileo toast notifications for Livewire 4. Beautiful gooey spring-physics toasts with a simple PHP trait API.

Powered by Sileo — a tiny, opinionated React toast component.

Requirements

PHP 8.2+
Laravel 11 or 12
Livewire 4
Node / Vite
React 18 or 19

Installation

1. Install the Composer package

composer require superbyte23/sileo-livewire

2. Install the npm dependencies

npm install sileo react react-dom @vitejs/plugin-react

3. Enable React in Vite

// vite.config.js
import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import react from '@vitejs/plugin-react'

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        react(),
    ],
})

4. Publish the JS bridge

php artisan vendor:publish --tag=sileo-livewire-js

This copies sileo-bridge.js into resources/js/.

5. Add the Toaster to your root layout

{{-- resources/views/layouts/app.blade.php --}}
<livewire:sileo-toaster position="top-right" />

Available positions: top-left top-center top-right bottom-left bottom-center bottom-right

Usage

Add the HasSileoToasts trait to any Livewire component:

use Superbyte23\SileoLivewire\Concerns\HasSileoToasts;
use Livewire\Component;

new class extends Component
{
    use HasSileoToasts;

    public function save(): void
    {
        $this->toastSuccess('Saved!', 'Your changes were persisted.');
    }
}

Available Methods

// Basic
$this->toastSuccess('Title', 'Description');
$this->toastError('Title', 'Description');
$this->toastWarning('Title', 'Description');
$this->toastInfo('Title', 'Description');

// Action button
$this->toastAction(
    type:         'info',
    title:        'Item deleted',
    description:  'The record has been removed.',
    actionLabel:  'Undo',
    actionEvent:  'undo-delete',   // Livewire event dispatched on click
    actionParams: [42],            // optional params
);

// Promise (loading → success/error)
$this->toastPromise(
    event:   'run-save',
    loading: 'Saving…',
    success: 'All saved!',
    error:   'Save failed.',
);
$this->resolveToastPromise('run-save'); // call when done
$this->rejectToastPromise('run-save');  // call on failure

// Custom position per toast
$this->dispatch('sileo', type: 'success', title: 'Done!', position: 'bottom-center');

Promise Example

#[\Livewire\Attributes\On('run-save')]
public function runSave(): void
{
    try {
        // ... your save logic ...
        $this->resolveToastPromise('run-save');
    } catch (\Throwable) {
        $this->rejectToastPromise('run-save');
    }
}

Theme

Sileo intentionally inverts the theme — dark page shows light toasts, light page shows dark toasts. Theme is detected from the .dark class on <html>, applied server-side (e.g. Flux, maryUI, Filament).

License

MIT — superbyte23

Sileo Livewire Laravel Package