mckenziearts/laravel-notify Laravel Package

Laravel Notify is a package that lets you add custom notifications to your project. A diverse range of notification design is available.

If your project already uses Tailwind CSS 4.x, follow these steps to integrate Laravel Notify directly into your build process.

Step 1: Configure Tailwind to scan package files

In your resources/css/app.css, add the package's Blade files to Tailwind's content sources using the @source directive:

@import "tailwindcss";
 
@source "../../vendor/mckenziearts/laravel-notify/resources/views/**/*.blade.php";

Step 2: Import the JavaScript

In your resources/js/app.js, import Alpine.js if you haven't already:

import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()

Step 3: Add the notification component to your layout

In your main Blade layout file (e.g., resources/views/layouts/app.blade.php):

<!-- Add notification component before closing body tag -->
<x-notify::notify />

Step 4: Build your assets

npm run build
# or for development
npm run dev

✅ Done! Tailwind will automatically generate CSS for all the notification styles used in the package.

Option 2: Without Tailwind CSS

If you don't use Tailwind CSS in your project, you can use the pre-compiled CSS and JavaScript files.

Add directives to your layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel Notify</title>
 
    <!-- Add Laravel Notify CSS -->
    @notifyCss
</head>
<body>
 
    <!-- Add notification component -->
    <x-notify::notify />
 
    <!-- Add Laravel Notify JavaScript -->
    @notifyJs
</body>
</html>

✅ Done! The pre-compiled assets will be loaded from your public/vendor/mckenziearts/laravel-notify/dist/ directory.

Usage

Within your controllers, before you perform a redirect call the notify method with a title.

public function store()
{
    notify()
        ->success()
        ->title('⚡️ Laravel Notify is awesome!')
        ->send();
 
    return back();
}

mckenziearts/laravel-notify

Description

Step 1: Configure Tailwind to scan package files

Step 2: Import the JavaScript

Step 3: Add the notification component to your layout

Step 4: Build your assets

Option 2: Without Tailwind CSS

Add directives to your layout

Usage

Related Content on Laravel Daily

Recent Courses on Laravel Daily

Laravel 13 Starter Kit Teams and Customizations

Testing in Laravel 13 For Beginners

How to Build Laravel 13 API From Scratch

We'd Love Your Feedback

Thank You!