README

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 (v3 & v4), supports custom events, and now features multiple modern themes like iOS, Glassmorphism, and Neon for a premium UX out of the box.

🚀 Live Demo

👉 Try the Live Demo

✨ Features

🔥 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.
🎨 Themeable – Choose from 7+ stunning themes including iOS, Neon, and Glassmorphism.
⚡ Livewire v3 & v4 Ready – Fully supports Livewire v3 & v4 with event-based dispatching.

📦 Installation

Install the package via Composer:

composer require devrabiul/laravel-toaster-magic

Then publish the package assets:

php artisan vendor:publish --provider="Devrabiul\ToastMagic\ToastMagicServiceProvider"

⚙️ Usage

1. Basic Setup

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>

2. Usage in Controller

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();
}

3. Usage in JavaScript (Optional)

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");

4. ✅ Livewire Support (v3 & v4)

Enable Livewire support by updating your config file:

// config/laravel-toaster-magic.php

return [
    'options' => [
        // your toast options...
    ],
    'livewire_enabled' => true,
    'livewire_version' => 'v3', // Supports 'v3' or 'v4'
];

Set 'livewire_enabled' => true to 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

5. 🎨 Themes (New in v2.0)

ToastMagic v2.0 introduces a powerful theming system. You can switch themes globally via the config file.

Available Themes:

default: The classic, clean look.
material: Material Design inspired, flat and bold.
ios: Apple-style notifications with blur/backdrop effects (Glassmorphism lite).
glassmorphism: Heavy blur, semi-transparent backgrounds, modern aesthetic.
neon: Dark, glowing borders and vibrant colors—perfect for dark mode apps.
minimal: Clean, borderline design with colored left accents.
neumorphism: Soft UI shadows and extruded plastic look.

How to Change Theme:

Update your config/laravel-toaster-magic.php file:

// config/laravel-toaster-magic.php

return [
    'options' => [
        // other options..
        "theme" => "default", // Options: "default", "material", "ios", "glassmorphism", "neon", "minimal", "neumorphism"
    ],
    // other settings..
];

6. 🎨 Enabling Color Mode

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',
];

7. 🎨 Enabling Gradient Mode

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, // Adds subtle gradients to backgrounds
    ],
    'livewire_enabled' => false,
    'livewire_version' => 'v3',
];

Note: Gradient mode works best with the default, material, and neon themes.

🧩 Alternative Syntax & Fluent API

ToastMagic provides both simple and advanced APIs to suit your style.

🔹 Static Method (Quick)

use Devrabiul\ToastMagic\Facades\ToastMagic;

ToastMagic::success('Operation Successful');
ToastMagic::error('Something went wrong');

🔹 Fluent Syntax (Advanced)

ToastMagic::dispatch()->success(
    'User Created',
    'The user has been successfully created.',
    [
        'showCloseBtn'    => true,
        'customBtnText'   => 'View Profile',
        'customBtnLink'   => 'https://demo.com',
    ]
);

📍 Toast Position Options

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

🌙 Enable Dark Mode

Add theme="dark" to your <body> tag to automatically enable dark mode.

<body theme="dark">

🎯 Get Started Today!

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

🤝 Contributing

We welcome contributions! Please fork the repository, make your changes, and submit a pull request. For feature requests or issues, open a GitHub issue.

📄 License

This package is open-source software licensed under the MIT license.

🌱 Treeware

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.

📬 Contact

For support or inquiries, feel free to reach out: 📧 devrabiul@gmail.com

devrabiul / laravel-toaster-magic

Maintainers

Details