Components

Notification Center

A bell with an unread-count badge that opens an inbox of notifications.

php artisan blatui:add notification-center

{{-- The `open` prop defaults the panel open so the inbox is visible in the docs. --}}
<x-ui.notification-center
    open
    :notifications="[
        ['title' => 'New comment on your post', 'body' => 'Alex Rivera replied: \'This is exactly what I needed, thanks!\'', 'time' => '2 minutes ago', 'read' => false, 'avatar' => 'https://github.com/shadcn.png'],
        ['title' => 'Payment received', 'body' => 'Your invoice #1042 for \$240.00 has been paid.', 'time' => '1 hour ago', 'read' => false, 'icon' => 'credit-card'],
        ['title' => 'Deployment successful', 'body' => 'blatui-demo deployed to production in 47s.', 'time' => '3 hours ago', 'read' => true, 'icon' => 'rocket'],
        ['title' => 'Weekly report ready', 'body' => 'Your analytics summary for this week is available.', 'time' => 'Yesterday', 'read' => true, 'icon' => 'chart-line'],
    ]"
/>

Empty

{{-- No notifications → the empty state. Opened by default so the empty panel is visible. --}}
<x-ui.notification-center open :notifications="[]" />

API Reference

Props, slots and exposed methods for <x-ui.notification-center>.

Props

Prop	Type	Default	Description
`notifications`	`array`	`[]`	The list of notifications to render in the panel. Pass an empty array to show the built-in "all caught up" empty state. See Each notification below.
`open`	`bool`	`false`	Whether the panel starts open on load. Intended for demos so the inbox is visible; leave false in production so the page is not covered.

Each notification

Prop	Type	Default	Description
`title`*	`string`	—	The notification headline, shown in bold as the first line of the row.
`body`	`string`	—	Optional supporting text shown under the title.
`time`	`string`	—	A human-readable timestamp (e.g. "2 minutes ago") shown as the last line. Formatted by you; rendered verbatim.
`read`	`bool`	`false`	Whether the item starts read. Unread items get an accent bar, a tinted background and a dot, and count toward the trigger badge.
`icon`	`string`	—	A lucide icon name (without the "lucide-" prefix) shown as the leading visual when no avatar is given. Falls back to a bell.
`avatar`	`string`	—	An image URL shown as a round leading avatar. Takes precedence over icon.

Methods

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method	Description
`toggle()`	Opens the panel if closed, closes it if open.
`openPanel()`	Opens the panel and moves focus into it.
`close(returnFocus = true)`	Closes the panel; by default returns focus to the bell trigger.
`markRead(i)`	Marks the notification at index i as read.
`markAllRead()`	Marks every notification as read and clears the unread badge.

Customize

blatui