Notification Center
An inbox grouped into Today and Earlier with unread dots, time ago, mark read, mark all read, delete, skeletons, an empty state and load more. NotificationBell opens it from a bell with a count.
import { NotificationBell, NotificationCenter } from "pleate/notification-center";Bell, inline, loading and empty
Open the bell, mark items read, load more.
Plate
Notifications2
- Unread: Marco mentioned you"Can we swap Thursday's risotto for the miso salmon?"
- Unread: Lena joined your household
- Next week's plan is ready14 meals, 3 new recipes, one shopping list.
- Your lemon tart got 12 saves
- Receipt for OctoberPlate Family, 6.99 EUR
Loading
Loading notifications
Notifications
You're all caught up
New notifications will show up here.
Props
- items
Notifications, newest first.
{ id, title, body?, createdAt, read, href?, kind?, icon? }[]- unreadCount
Badge and header count (e.g. from the server).
numberdefault unread items- onMarkRead / onMarkAllRead / onDelete
Actions; delete shows only when set.
(id) => void / () => void / (id) => void- onLoadMore / hasMore / loading
Paging; loading shows skeletons when empty.
() => void / boolean / boolean- icons
Icon per kind.
Record<kind, ReactNode>- onSelect / now / locale
Row press, reference time, formatting.
(item) => void / Date / string- Bell: open / onOpenChange / align / bellLabel
Popover control and the bell's accessible name.
- labels
Every visible string, for your wording or translation.
object
Accessibility
- The bell's name includes the unread count ("Notifications, 2 unread").
- Unread rows say so to screen readers; every action button is named after its notification.
- The popover traps focus while open; Escape closes it and returns focus to the bell.