Laravel Toaster Magic is a lightweight and flexible toast notification package for Laravel applications — built with zero dependencies on jQuery, Bootstrap, or Tailwind. It’s fully compatible with Livewire, supports custom events, and now features a Material-inspired design for a modern UX out of the box.
- 🔥 Easy-to-Use – Simple and intuitive toast notifications for Laravel.
- 🌍 RTL Support – Full compatibility with right-to-left (RTL) languages.
- 🌙 Dark Mode – Seamless dark mode integration.
- 🎨 Customizable – Tailor toasts with various styles, buttons, and positions.
- ⚡ Livewire v3 Ready – Fully supports Livewire v3 with event-based dispatching.
Install the package via Composer:
composer require devrabiul/laravel-toaster-magicThen publish the package assets:
php artisan vendor:publish --provider="Devrabiul\ToastMagic\ToastMagicServiceProvider"Include the necessary assets in your layout Blade template:
In the <head> section:
{!! ToastMagic::styles() !!}Before the closing </body> tag:
{!! ToastMagic::scripts() !!}Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page</title>
{!! ToastMagic::styles() !!}
</head>
<body>
<!-- Your Content -->
{!! ToastMagic::scripts() !!}
</body>
</html>Trigger toast notifications from your controllers using the ToastMagic facade:
use Devrabiul\ToastMagic\Facades\ToastMagic;
public function store()
{
// Your logic
ToastMagic::success('Successfully Created');
// Another Way - message and description
ToastMagic::success("Success!", "Your data has been saved!");
// Another Way - message and description
ToastMagic::success("Success!", "Your data has been saved!", [
'showCloseBtn' => true,
'customBtnText' => 'Link Text',
'customBtnLink' => 'https:/demo.com',
]);
return back();
}Use ToastMagic directly in JavaScript (for AJAX responses, etc.):
const toastMagic = new ToastMagic();
// Basic notifications
toastMagic.success("Success!", "Your data has been saved!");
toastMagic.error("Error!", "Something went wrong.");
toastMagic.warning("Warning!", "Check your input.", true);
toastMagic.info("Info!", "Click for details.", false, "Learn More", "https://example.com");Enable Livewire support by updating your config file:
// config/laravel-toaster-magic.php
return [
'options' => [
// your toast options...
],
'livewire_enabled' => true,
'livewire_version' => 'v3',
];- Set
'livewire_enabled' => trueto activate Livewire integration. - Set
'livewire_version' => 'v3'to specify the Livewire version.
Dispatch toast notifications from Livewire components:
$this->dispatch('toastMagic',
status: 'success',
title: 'User Created',
message: 'The user has been successfully created.',
options: [
'showCloseBtn' => true,
'customBtnText' => 'Link Text',
'customBtnLink' => 'https:/demo.com',
],
);
$this->dispatch('toastMagic',
status: 'info',
title: 'User Created 2',
message: 'The user has been successfully created.'
);Supported status types: success, info, warning, error
Change Theme by updating your config file:
// config/laravel-toaster-magic.php
return [
'options' => [
// your toast options..
"theme" => "material", // "default, material".
],
// your toast options..
];ToastMagic supports a color mode that dynamically applies toast colors based on the toast type (success, error, warning, info). This makes your notifications visually consistent and meaningful without manually specifying colors or themes.
Enable color mode in your configuration file config/laravel-toaster-magic.php:
return [
'options' => [
// other options...
'color_mode' => true, // Automatically apply colors based on toast type
],
'livewire_enabled' => false,
'livewire_version' => 'v3',
];Laravel Toaster Magic now supports a gradient mode, which dynamically applies toast colors based on the toast type (success, error, warning, info). This ensures that your notifications are visually consistent and meaningful without manually specifying colors or themes.
To enable gradient mode, update your configuration file config/laravel-toaster-magic.php:
return [
'options' => [
// other options...
"gradient_enable" => true, // Only available for default and material themes
],
'livewire_enabled' => false,
'livewire_version' => 'v3',
];Note: Gradient mode works only with the default and material themes.
ToastMagic provides both simple and advanced APIs to suit your style.
use Devrabiul\ToastMagic\Facades\ToastMagic;
ToastMagic::success('Operation Successful');
ToastMagic::error('Something went wrong');ToastMagic::dispatch()->success(
'User Created',
'The user has been successfully created.',
[
'showCloseBtn' => true,
'customBtnText' => 'View Profile',
'customBtnLink' => 'https://demo.com',
]
);Customize toast display position using any of the following:
| Position | Description |
|---|---|
toast-top-start |
Top left corner |
toast-top-end |
Top right corner (default) |
toast-top-center |
Top center |
toast-bottom-start |
Bottom left corner |
toast-bottom-end |
Bottom right corner |
toast-bottom-center |
Bottom center |
Add theme="dark" to your <body> tag to automatically enable dark mode.
<body theme="dark">Experience the magic of ToastMagic and enrich your Laravel application with modern, elegant toast notifications.
- 🔗 GitHub: devrabiul/laravel-toaster-magic
- 🔗 Live Demo: laravel-toaster-magic.rixetbd.com
- 🔗 Packagist: packagist.org/packages/devrabiul/laravel-toaster-magic
We welcome contributions! Please fork the repository, make your changes, and submit a pull request. For feature requests or issues, open a GitHub issue.
This package is open-source software licensed under the MIT license.
This package is Treeware. If you use it in production, then we ask that you buy the world a tree to thank us for our work. By contributing to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats.
For support or inquiries, feel free to reach out: 📧 [email protected]
