Notification Center
A bell with a rolling unread badge and an inbox panel (usable inline or in its popover): tabs, day groups, unread dots, mark all read, per-item read and mute actions, and a roving keyboard list.
Preview
Notifications
Today
MH
Malik mentioned you in Q4 roadmap
@you can we lock the pricing copy before Thursday’s review?
4m
PS
Priya approved #482 Cache invoices
38m
TR
Tomás replied to your comment
Agreed, the empty state needs a real example, not a placeholder.
2h
Yesterday
IM
Ines invited you to Design crit
Yesterday
Earlier
RB
v2.14.0 shipped to production
Mon
PS
Priya shared Churn notes with you
Sun
O
Pebble
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items / defaultItems | NotificationItem[] | — / [] | { id, actor: { name, initials }, title, body?, time, group, read?, muted?, mention? }. group is the day heading. |
| onItemsChange | (items) => void | — | Called after mark read, mute or mark all read. |
| onOpenItem | (item) => void | — | A row was opened by click or Enter. It is also marked read. |
| settingsHref | string | "#settings" | Footer settings link. |
| open / defaultOpen / onOpenChange | boolean / boolean / (open) => void | — | Popover state. |
| className | string | — | Merged on the bell trigger. |
| defaultTab | "all" | "mentions" | "unread" | "all" | Tab shown first (NotificationCenter and NotificationPanel). |
| surface | boolean | true | NotificationPanel. Draw the raised card; set false inside your own overlay. The panel is controlled via items / onItemsChange. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.