Download the PHP package mrclln/wire-sileo without Composer
On this page you can find all versions of the php package mrclln/wire-sileo. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download mrclln/wire-sileo
More information about mrclln/wire-sileo
Files in mrclln/wire-sileo
Package wire-sileo
Short Description A Laravel Livewire package for the Sileo React component
License MIT
Homepage https://github.com/mrclln/wire-sileo
Informations about the package wire-sileo
wire-sileo
A Laravel Livewire package that brings beautiful toast notifications to your Livewire applications. Inspired by the elegant UI of Sileo and built with the Livewire notification patterns pioneered by Livewire Alert.
Features
- Fluent PHP API - Chain methods to build beautiful toasts
- Multiple toast types - Success, error, warning, info, loading, and action toasts
- Promise support - Show loading states that resolve/reject based on backend logic
- Full customization - Position, duration, theme, styles, and more
- Livewire-native - Works seamlessly with Livewire 3+ component lifecycle
Installation
Install the package and frontend dependencies:
The package requires:
sileo- The React toast component (v0.1.5+)lucide-react- Icon library for custom iconsreactandreact-dom- Required by Sileo
Publish the configuration, JavaScript bridge, and view:
This publishes:
config/wire-sileo.php- Configuration fileresources/js/wire-sileo.js- JavaScript bridgeresources/views/wire-sileo.blade.php- Blade view component
Setup
Add the Livewire toaster to your application layout:
Import the published bridge in your Vite entrypoint, or add it to vite.config.js:
Option 1: Import in your app entrypoint (e.g., resources/js/app.js):
Option 2: Add as a separate Vite input (in vite.config.js):
Then build your assets with Vite:
Usage
Use the facade in your Livewire components:
Toast Types
| Method | Description |
|---|---|
Sileo::success($title, $description) |
Green success toast |
Sileo::error($title, $description) |
Red error toast |
Sileo::warning($title, $description) |
Amber warning toast |
Sileo::info($title, $description) |
Blue info toast |
Sileo::loading($title, $description) |
Loading state toast |
Sileo::danger($title, $description) |
Alias for error() |
Fluent Options
All toast methods return a chainable builder:
Available Options
| Option | Type | Description |
|---|---|---|
title |
string | Toast heading text |
description |
string | Toast body text (plain text) |
html |
string | Raw HTML content (renders HTML markup) |
position |
string | Position: top-right, top-center, top-left, bottom-right, bottom-center, bottom-left |
duration |
int/null | Display time in milliseconds. null disables auto-dismiss |
theme |
string | Theme: light, dark, or system (default: follows OS preference) |
fill |
string | Background color (CSS value like #1f2937 or Tailwind color like white) |
roundness |
int | Border radius in pixels (default: 16) |
styles |
array | Custom Tailwind classes: ['title' => '', 'description' => '', 'badge' => '', 'button' => ''] |
customClasses |
array/string | Additional CSS classes to apply to the toast container |
icon |
string | Icon name from lucide-react (e.g., rocket, check, info, alert-circle) |
HTML Content
For HTML in toast content, use the html() method (note: this renders raw HTML via dangerouslySetInnerHTML):
⚠️ Security: Only use trusted HTML content as it renders raw markup without sanitization.
Custom Icons
Pass an icon name to replace the default state icon:
Available icons: Any icon from lucide-react (use kebab-case: alert-circle, check-circle, loader-2, trash, etc.).
Array Configuration
Pass an array with all options at once:
Action Toasts
Toasts with a single interactive button:
Note: Sileo action toasts only support a single button. Use button() for the action and set duration(null) if you want the toast to persist until interaction.
Promise Toasts
Promise toasts show a loading state that resolves or rejects based on your backend logic:
Fluent API:
Array API:
Resolving Promises:
Custom Classes
Add custom CSS classes to toast elements:
Configuration
Publish the configuration file:
Configure defaults in config/wire-sileo.php:
Screenshots
Credits
- UI design inspired by Sileo by Aaryan Khandekar
- Notification patterns inspired by Livewire Alert by Jantinn Erezo
License
MIT License
All versions of wire-sileo with dependencies
livewire/livewire Version ^3.0|^4.0
illuminate/support Version ^10.0|^11.0|^12.0|^13.0