Components
Notification Center
A bell with an unread-count badge that opens an inbox of notifications.
php artisan blatui:add notification-center
Notifications
-
New comment on your post
Alex Rivera replied: 'This is exactly what I needed, thanks!'
2 minutes ago
-
Payment received
Your invoice #1042 for \$240.00 has been paid.
1 hour ago
-
Deployment successful
blatui-demo deployed to production in 47s.
3 hours ago
-
Weekly report ready
Your analytics summary for this week is available.
Yesterday
{{-- 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
Notifications
You're all caught up
No notifications right now.
{{-- No notifications → the empty state. Opened by default so the empty panel is visible. --}}
<x-ui.notification-center open :notifications="[]" />