PHPackages                             edulazaro/wiretoast - 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. edulazaro/wiretoast

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

edulazaro/wiretoast
===================

Framework-agnostic toast notification system for Laravel, Livewire and Alpine. Pure CSS themes, custom-theme via variables, drop-in API.

v1.1.0(2w ago)022MITHTMLPHP >=8.2CI passing

Since Apr 27Pushed 2w agoCompare

[ Source](https://github.com/edulazaro/wiretoast)[ Packagist](https://packagist.org/packages/edulazaro/wiretoast)[ RSS](/packages/edulazaro-wiretoast/feed)WikiDiscussions main Synced 1w ago

READMEChangelog (4)Dependencies (2)Versions (5)Used By (0)

wiretoast
=========

[](#wiretoast)

Framework-agnostic toast notification system for Laravel, Livewire and Alpine. Pure CSS themes (no Tailwind, no Bootstrap), drop-in API, zero JS dependencies.

**[Live preview →](https://edulazaro.github.io/wiretoast/)** Try the 11 themes, 5 types, 7 positions and dark mode in the interactive demo.

Requirements
------------

[](#requirements)

- PHP `>=8.2`
- Laravel `>=11.0` (any future version included)
- Livewire `>=3.0` *(optional, only needed for the `$this->notify()` helper)*

Features
--------

[](#features)

- 5 semantic types: `success`, `error`, `warning`, `info`, `neutral`
- 7 stacked positions: `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`, `center`
- 11 visual themes bundled: `flat`, `soft`, `glass`, `gradient`, `neon`, `minimal`, `claude`, `chatgpt`, `synthwave`, `megaflow`, `brutalist`
- Custom themes via CSS variables (no Blade override needed)
- Dark mode automatic (`prefers-color-scheme`) and opt-in (`.dark` / `[data-wt-theme-mode="dark"]`)
- Optional auto-dismiss progress bar with pause-on-hover
- Optional title + message
- Group mode: collapse multiple messages of the same type into one

Install
-------

[](#install)

```
composer require edulazaro/wiretoast
```

Then load the assets. Pick the path that matches your project.

### Without a bundler: vendor:publish

[](#without-a-bundler-vendorpublish)

For projects that don't use Vite or another bundler, copy the assets to `public/vendor/wiretoast/` and tell the component to inject the `` and `` tags by passing `:assets="true"`.

```
php artisan vendor:publish --tag=wiretoast-assets
```

```

```

### Recommended: bundle with Vite

[](#recommended-bundle-with-vite)

Import wiretoast from your existing `app.css` and `app.js`. Vite minifies, hashes, and concatenates everything into your main bundle, so there's no extra HTTP request and you reuse your cache-busting setup.

```
// resources/js/app.js
import '../../vendor/edulazaro/wiretoast/resources/js/wiretoast.js';
```

```
/* resources/css/app.css */
@import '../../vendor/edulazaro/wiretoast/resources/css/wiretoast.css';
```

Add the component to your layout:

```

```

By default the component does not inject any `` or `` tags, so it won't conflict with your Vite bundle.

Optionally, add a Vite alias for cleaner imports:

```
// vite.config.js
import path from 'path';

export default defineConfig({
    resolve: {
        alias: {
            '@wiretoast': path.resolve(__dirname, 'vendor/edulazaro/wiretoast/resources'),
        },
    },
});
```

```
// resources/js/app.js
import '@wiretoast/js/wiretoast.js';
import '@wiretoast/css/wiretoast.css';
```

### Optional props (both paths)

[](#optional-props-both-paths)

```

```

Usage
-----

[](#usage)

The API is the same in all three environments and always called `notify`.

### Livewire (PHP)

[](#livewire-php)

```
// Plain message
$this->notify('Saved successfully');

// With type
$this->notify('Could not connect', 'error');

// Title + message
$this->notify(['title' => 'Saved', 'message' => 'All changes applied'], 'success');

// Options (third arg as array)
$this->notify('Heads up', 'warning', [
    'position' => 'bottom-center',
    'timeout'  => 3000,
    'progress' => true,
]);

// Legacy: third arg as boolean = group
$this->notify('Item added', 'success', true);
```

### Alpine.js

[](#alpinejs)

```

    Save

Save with progress
```

### JavaScript

[](#javascript)

```
window.notify('Saved successfully', 'success');
window.notify({ title: 'Saved', message: 'All changes applied' }, 'success');
window.notify('Heads up', 'warning', { position: 'bottom-center', timeout: 3000, progress: true });
```

Themes
------

[](#themes)

Set the theme on the component (or any ancestor element):

```

```

Or dynamically:

```
document.body.dataset.wtTheme = 'neon';
```

### Custom theme

[](#custom-theme)

Themes are pure CSS variable sets. Create your own without touching the package:

```
:root {
    --wt-radius: 6px;
    --wt-bg: #fafafa;
    --wt-text: #222;
    --wt-shadow: 0 2px 8px rgba(0,0,0,.06);

    --wt-success: #10b981;
    --wt-error:   #ef4444;
    --wt-warning: #f59e0b;
    --wt-info:    #3b82f6;
    --wt-neutral: #6b7280;
}
```

Or scope it under an attribute so users can switch:

```
[data-wt-theme="brand"] .wt-toast {
    background: linear-gradient(to right, #ff6b6b, #feca57);
    color: white;
    border: none;
    border-radius: 999px;
}
```

```

```

Dark mode
---------

[](#dark-mode)

Out of the box, dark mode is applied automatically based on the user's OS via `prefers-color-scheme: dark`. To override:

```
   {{-- force dark --}}
  {{-- force light --}}
```

The package also responds to a `.dark` class on any ancestor (compatible with Tailwind dark mode setups) and to the `[data-wt-theme-mode]` attribute.

Reference
---------

[](#reference)

### `notify(input, type, options)` (JS) / `$this->notify(...)` (Livewire)

[](#notifyinput-type-options-js--this-notify-livewire)

ArgumentTypeDescription`input``string | { title, message }`Message text or object with title and message`type``'success' | 'error' | 'warning' | 'info' | 'neutral'`Semantic type, default `'info'` (JS) / `'success'` (Livewire)`options``boolean | object`Options object, or `true` for legacy group mode### Options object

[](#options-object)

KeyTypeDefaultDescription`position``string``'top-right'`One of the 7 positions`timeout``number``5000`Auto-dismiss in ms (`0` = persist)`progress``boolean``false`Show countdown bar (pauses on hover)`group``boolean``false`Append to existing same-type toast### CSS variables

[](#css-variables)

Structural: `--wt-radius`, `--wt-padding`, `--wt-gap`, `--wt-width`, `--wt-font`, `--wt-font-size`, `--wt-line-height`

Color: `--wt-bg`, `--wt-text`, `--wt-text-muted`, `--wt-border`, `--wt-shadow`

Semantic: `--wt-success`, `--wt-error`, `--wt-warning`, `--wt-info`, `--wt-neutral` (each also has a `*-tint` for soft theme)

Motion: `--wt-duration`, `--wt-easing`

Per-toast: `--wt-progress-duration` (set automatically when `progress: true`)

Credits
-------

[](#credits)

Developed by [Edu Lázaro](https://edulazaro.com).

License
-------

[](#license)

MIT

###  Health Score

42

—

FairBetter than 88% of packages

Maintenance96

Actively maintained with recent releases

Popularity9

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity49

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

Every ~7 days

Total

4

Last Release

19d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/6a3c47449dfb2ec121aa410da024f47586b87cc2799a825f0418e6c5e5904955?d=identicon)[edulazaro](/maintainers/edulazaro)

---

Top Contributors

[![edulazaro](https://avatars.githubusercontent.com/u/7797530?v=4)](https://github.com/edulazaro "edulazaro (8 commits)")

---

Tags

laravelnotificationslivewirealpinetoast

### Embed Badge

![Health badge](/badges/edulazaro-wiretoast/health.svg)

```
[![Health](https://phpackages.com/badges/edulazaro-wiretoast/health.svg)](https://phpackages.com/packages/edulazaro-wiretoast)
```

###  Alternatives

[psalm/plugin-laravel

Psalm plugin for Laravel

3325.1M337](/packages/psalm-plugin-laravel)[moonshine/moonshine

Laravel administration panel

1.3k239.9k72](/packages/moonshine-moonshine)[ascsoftw/livewire-toast

Livewire Package to display Toast Notifications

48545.1k1](/packages/ascsoftw-livewire-toast)

PHPackages © 2026

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