Download the PHP package edulazaro/wiretoast without Composer
On this page you can find all versions of the php package edulazaro/wiretoast. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package 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 → Try the 11 themes, 5 types, 7 positions and dark mode in the interactive demo.
Requirements
- PHP
>=8.2 - Laravel
>=11.0(any future version included) - Livewire
>=3.0(optional, only needed for the$this->notify()helper)
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
Then load the assets. Pick the path that matches your project.
Without a bundler: vendor:publish
For projects that don't use Vite or another bundler, copy the assets to public/vendor/wiretoast/ and tell the component to inject the <link> and <script> tags by passing :assets="true".
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.
Add the component to your layout:
By default the component does not inject any <link> or <script> tags, so it won't conflict with your Vite bundle.
Optionally, add a Vite alias for cleaner imports:
Optional props (both paths)
Usage
The API is the same in all three environments and always called notify.
Livewire (PHP)
Alpine.js
JavaScript
Themes
Set the theme on the component (or any ancestor element):
Or dynamically:
Custom theme
Themes are pure CSS variable sets. Create your own without touching the package:
Or scope it under an attribute so users can switch:
Dark mode
Out of the box, dark mode is applied automatically based on the user's OS via prefers-color-scheme: dark. To override:
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
notify(input, type, options) (JS) / $this->notify(...) (Livewire)
| Argument | Type | Description |
|---|---|---|
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
| Key | Type | Default | Description |
|---|---|---|---|
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
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
Developed by Edu Lázaro.
License
MIT