PHPackages                             theabhishekin/livewire-toast - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Mail & Notifications](/categories/mail)
4. /
5. theabhishekin/livewire-toast

ActiveLibrary[Mail & Notifications](/categories/mail)

theabhishekin/livewire-toast
============================

Sonner-style toast notifications for Laravel Livewire with Alpine.js

1.0.0(4mo ago)349MITBladePHP ^8.2

Since Feb 13Pushed 4mo agoCompare

[ Source](https://github.com/TheAbhishekIN/livewire-toast)[ Packagist](https://packagist.org/packages/theabhishekin/livewire-toast)[ RSS](/packages/theabhishekin-livewire-toast/feed)WikiDiscussions main Synced today

READMEChangelog (1)Dependencies (2)Versions (2)Used By (0)

Livewire Toast (Sonner-style)
=============================

[](#livewire-toast-sonner-style)

A Sonner-style toast notification package for Laravel Livewire, built with Alpine.js. Inspired by [shadcn/ui Sonner](https://ui.shadcn.com/docs/components/sonner) and [emilkowalski/sonner](https://sonner.emilkowal.ski/).

Features
--------

[](#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
------------

[](#installation)

```
composer require theabhishekin/livewire-toast
```

Setup
-----

[](#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
-----

[](#usage)

### From a Livewire component

[](#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
-------------

[](#configuration)

Edit `config/livewire-toast.php` after publishing:

KeyDefaultDescription`position``bottom-right`Toast container position`expand``false`Expand all toasts on hover`visible_toasts``3`Max visible toasts when not expanded`theme``light`light / dark`rich_colors``true`Type-colored borders`close_button``false`Show close button on each toast`offset``32`Container offset (px)`mobile_offset``16`Mobile offset (px)`gap``14`Gap between toasts (px)`duration``4000`Auto-dismiss duration (ms), 0 = never`dismissible``true`Allow manual dismiss`container_aria_label``Notifications`Accessibility labelPositions
---------

[](#positions)

- `top-left`, `top-center`, `top-right`
- `bottom-left`, `bottom-center`, `bottom-right`

Contributing
------------

[](#contributing)

Contributions are welcome! Please feel free to submit a [Pull Request](https://github.com/TheAbhishekIN/livewire-toast/pulls).

Issues
------

[](#issues)

If you discover any bugs or have feature requests, please open an [issue](https://github.com/TheAbhishekIN/livewire-toast/issues) on GitHub.

###  Health Score

38

—

LowBetter than 83% of packages

Maintenance75

Regular maintenance activity

Popularity13

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity47

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

142d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/52767864?v=4)[Abhishek Sharma](/maintainers/TheAbhishekIN)[@TheAbhishekIN](https://github.com/TheAbhishekIN)

---

Top Contributors

[![abhi-conceptlz](https://avatars.githubusercontent.com/u/143715324?v=4)](https://github.com/abhi-conceptlz "abhi-conceptlz (2 commits)")

---

Tags

notificationslivewirealpinetoastsonner

### Embed Badge

![Health badge](/badges/theabhishekin-livewire-toast/health.svg)

```
[![Health](https://phpackages.com/badges/theabhishekin-livewire-toast/health.svg)](https://phpackages.com/packages/theabhishekin-livewire-toast)
```

###  Alternatives

[livewire/flux

The official UI component library for Livewire.

9527.8M128](/packages/livewire-flux)[tallstackui/tallstackui

TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications.

725173.2k14](/packages/tallstackui-tallstackui)[tomshaw/electricgrid

A feature-rich Livewire package designed for projects that require dynamic, interactive data tables.

119.4k](/packages/tomshaw-electricgrid)[mati365/ckeditor5-livewire

CKEditor 5 integration for Laravel Livewire

447.9k](/packages/mati365-ckeditor5-livewire)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)