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

[NEW] Practical Laravel Security: Packages, Secrets, Supply-Chain Attacks

Roles and Permissions in Laravel 13

Queues in Laravel 13