Laravel Sonner

The ultimate Sonner toast notification wrapper for Laravel. Beautiful, stackable, and lightweight notifications for your Blade and Livewire applications.

SEO

• Modern Laravel Notifications
• Sonner Toast for Blade and Livewire
• Lightweight, stackable, beautiful toasts

SEO Highlights

• Instant, sleek toast UX
• Blade-first, Livewire-friendly
• Promise toasts, durations & positions
• Lightweight + stackable layout

Installation

composer require amjadiqbal/laravel-sonner

Usage

Simple

toast('Profile updated!');

Advanced

toast()
    ->success('Order Shipped')
    ->description('Your order #123 is on the way.')
    ->duration(5000);

Blade Component

Add the component at the end of your layout:

<x-sonner position="bottom-right" theme="system" />

Livewire Integration

From a Livewire component:

public function save()
{
    toast()->success('Saved')->description('Your changes were saved.');
    $this->dispatch('sonner:toast', type: 'success', title: 'Saved', description: 'Your changes were saved.');
}

In your layout:

<x-sonner />
<script>
window.addEventListener('sonner:toast', function(e){
  const d = e.detail || {};
  window.Sonner[d.type || 'toast'](d.title || '', { description: d.description || '' });
});
</script>

Promise

<button onclick="
  window.Sonner.promise(fetch('/ping'), {
    loading: 'Pinging...',
    success: 'Online',
    error: 'Offline'
  })
">Ping</button>

Configuration

• position: top-left, top-right, top-center, bottom-left, bottom-right, bottom-center
• theme: system, light, dark
• duration: milliseconds
• dismissible: true/false

Testing

composer install
vendor/bin/pest

License

MIT