Laravel Notification Center Component

Free · MIT

Bell trigger with an unread count and a scrollable panel of notifications.

A Notification Center built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default and dark-mode ready. Aura's solid-background and border colours are contrast-tested against WCAG 2.1 AA/UI in CI, in both themes — see what's covered. Drop it in with a single Blade tag: <x-aura::notification-center>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::notification-center :count="$unread">
    @foreach ($notifications as $notification)
        <x-aura::notification-center.item
            :title="$notification->title"
            :description="$notification->body"
            :time="$notification->created_at->diffForHumans()"
            :read="$notification->read_at !== null"
            :url="$notification->url"
        />
    @endforeach
</x-aura::notification-center>

See the full API, props and live examples in the Notification Center documentation.

Overview

<x-aura::notification-center> is the bell in the corner of an application shell: a trigger carrying an unread badge, and a panel listing recent notifications. Each entry is a <x-aura::notification-center.item>.

Props

Prop	Type	Default	Description
`count`	`int`	`0`	Unread count on the badge. `0` hides the badge.
`position`	`string`	`'bottom-end'`	Where the panel opens relative to the trigger.
`maxHeight`	`string`	`'24rem'`	Height at which the list starts scrolling.

Item

Prop	Type	Default	Description
`title`	`string`	`''`	The headline.
`description`	`string\|null`	`null`	Supporting line.
`time`	`string\|null`	`null`	Relative time, already formatted.
`read`	`bool`	`false`	Dims the entry and drops the unread dot.
`icon`	`string`	`'heroicon-o-bell'`	Icon for the entry.
`color`	`string`	`'primary'`	Accent for the icon: any Aura semantic colour.
`url`	`string\|null`	`null`	Makes the entry a link.