React Notification Inbox
The bell menu, done properly. Notifications grouped by day, filterable by kind, unread clearly marked, and every item a link to the thing that fired it — with mark-as-read on open and mark-all-read for the moment you declare bell bankruptcy.
Today
Yesterday
2026-07-19
Installation
Props
| Prop | Type | Description |
|---|---|---|
| notifications | Notification[] | { id, kind, title, body?, time, read?, source?, href? } |
| now | number | Reference for relative time (default: newest item) |
| onOpen | (n: Notification) => void | Fired when an item is opened |
Read state and grouping
Read state is the feature people actually judge a notification centre by, so it is handled with care: unread items carry a dot, a bolder title, and a faint wash; opening one marks it read and fires onOpen for you to follow its href. The header count and the "unread" filter both track it live, and "mark all read" clears the backlog in one action.
Items group by calendar day — Today, Yesterday, then dates — with sticky day headers as you scroll, and sort newest-first within each group. Relative times ("3m ago", "2h ago") are computed against now; pass a fixed now for deterministic rendering, or let it default to the newest item. kind (critical, warning, info, activity) drives the icon and colour and powers the filter row, so an operator can pull just the critical items out of a noisy day.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.