# Notification Center A bell with an unread-count badge that opens an inbox of notifications. - Install: `php artisan blatui:add notification-center` - Source: https://blatui.remix-it.com/r/notification-center.json - Composer: `composer require mallardduck/blade-lucide-icons gehrisandro/tailwind-merge-laravel` - npm: `npm install -D @alpinejs/anchor @alpinejs/focus` ## resources/views/components/ui/notification-center.blade.php ```blade @props([ 'notifications' => [], // [['title','body'?,'time','read'?,'icon'?,'avatar'?], ...] 'open' => false, // demo/initial open state — defaults the panel open so reviewers see it ]) @php // Normalise each notification to a stable shape. The list itself is rendered server-side // (so a per-item lucide icon / avatar resolves cleanly), while the reactive read-state // lives in Alpine keyed by index — clicking an item, the badge count and the unread tint // all stay in sync. `read` is the only field Alpine needs to mutate. $feed = collect($notifications)->values()->map(fn ($n, $i) => [ 'id' => $i, 'title' => (string) ($n['title'] ?? ''), 'body' => isset($n['body']) && $n['body'] !== '' ? (string) $n['body'] : null, 'time' => (string) ($n['time'] ?? ''), 'read' => (bool) ($n['read'] ?? false), 'icon' => isset($n['icon']) && $n['icon'] !== '' ? (string) $n['icon'] : null, 'avatar' => $n['avatar'] ?? null, ])->all(); // Alpine only tracks read-state; titles/bodies/times/icons are baked into the DOM. $readState = collect($feed)->map(fn ($n) => ['read' => $n['read']])->all(); @endphp

twMerge('relative inline-block') }} > {{-- Trigger: a bell with a live unread-count badge. The count lives in the accessible name, so the visible badge is aria-hidden to avoid double-announcing. --}} {{-- Teleported to so the panel is never clipped by an overflow-hidden ancestor. --}}

```