Wiretoast

Wiretoast is a framework-agnostic toast system for Laravel, Livewire and Alpine. Themes are pure CSS driven by variables, so there is no Tailwind or Bootstrap coupling anywhere in the package, and there are no JS dependencies.

Livewire is optional and only needed for the PHP helper.

Requirements: PHP 8.2+, Laravel 11+, Livewire 3 for the PHP side.

Installation

composer require edulazaro/wiretoast

There are two asset paths, and they are mutually exclusive.

With a bundler (Vite). Import from vendor into your entry files:

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

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

Then drop the component into your layout once. On this path it injects nothing, so it never collides with your build:

<x-wiretoast />

Without a bundler. Publish the assets and let the component emit the tags:

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

<x-wiretoast :assets="true" />

Firing a toast

The call is named notify from every entry point.

Livewire (component macro):

$this->notify('Saved successfully');
$this->notify('Could not connect', 'error');
$this->notify(['title' => 'Saved', 'message' => 'All changes applied'], 'success');

Alpine (dispatch a notify event with the same shape):

<button @click="$dispatch('notify', { message: 'Saved', type: 'success' })">
    Save
</button>

Plain JavaScript:

window.notify('Saved successfully', 'success');

All three land on the same notify function: Livewire and Alpine fire a notify window event that forwards into it, and the JS global is that function directly.

The five semantic types are success, error, warning, info and neutral. Pass a string for a plain message, or an object with title and message for a heading above the body.

Themes

Every theme is a set of CSS custom properties: --wt-bg, --wt-text, and the semantic --wt-success, --wt-error and so on. Eleven ship with the package:

flat, soft, glass, gradient, neon, minimal, claude, chatgpt, synthwave, megaflow, brutalist

<x-wiretoast theme="glass" />

Rolling your own means declaring variables in your own CSS. No package files touched, no build step of ours to run:

:root {
    --wt-radius: 6px;
    --wt-bg: #fafafa;
    --wt-text: #222;
    --wt-success: #10b981;
    --wt-error: #ef4444;
}

Dark mode

Out of the box it follows the operating system through prefers-color-scheme. To force a mode:

<x-wiretoast mode="dark" />

It also reacts to a .dark class on any ancestor, which lines up with most Tailwind dark mode setups, and to the [data-wt-theme-mode] attribute when you are driving theming yourself.