Livewire Toast (Sonner-style)

A Sonner-style toast notification package for Laravel Livewire, built with Alpine.js. Inspired by shadcn/ui Sonner and emilkowalski/sonner.

Features

• Stackable toasts with configurable visible count
• Types: default, success, error, warning, info, loading
• Title + description support
• Action & cancel buttons with URL or custom event dispatch
• Position: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
• Expand on hover (Sonner-style)
• Auto-dismiss with configurable duration
• Rich colors and dark mode support
• Publishable config for full customization

Installation

composer require theabhishekin/livewire-toast

Setup

1. Add the toast container to your layout (e.g. resources/views/layouts/app.blade.php):

@livewire('toast-container')

2. Import the toast JavaScript in your app's entry point (e.g. resources/js/app.js):

import './bootstrap';
import '../../packages/livewire-toast/resources/js/toast'; // or the package path when published

3. Publish the config (optional):

php artisan vendor:publish --tag=livewire-toast-config

Usage

From a Livewire component

// Simple toast
$this->dispatch('toast', [
    'title' => 'Event has been created.',
]);

// With description and type
$this->dispatch('toast', [
    'title' => 'Booking Updated',
    'description' => 'Your booking has been confirmed.',
    'type' => 'info', // default|success|error|warning|info|loading
]);

// With action button
$this->dispatch('toast', [
    'title' => 'Item deleted',
    'description' => 'You can undo this action.',
    'type' => 'success',
    'action' => [
        'label' => 'Undo',
        'url' => '/undo/123',
        // or: 'event' => 'toast-undo',
    ],
    'cancel' => [
        'label' => 'Dismiss',
    ],
]);

// Using the Toast helper
use TheAbhishekIN\LivewireToast\Toast;

Toast::info($this, 'Booking Updated', [
    'description' => 'Your booking has been confirmed.',
]);

Toast::success($this, 'Saved!');
Toast::error($this, 'Something went wrong.');
Toast::warning($this, 'Please review.');
Toast::loading($this, 'Processing...');

Configuration

Edit config/livewire-toast.php after publishing:

Positions

• top-left, top-center, top-right
• bottom-left, bottom-center, bottom-right

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Issues

If you discover any bugs or have feature requests, please open an issue on GitHub.