Centrim Design System — a token-first, accessible React component system.
Notifications
An inbox grouped by time on the open page canvas, where read items keep their place so the list never reorders.
What it demonstrates
- Time grouping with quiet labels instead of a card per notification
- Unread carried by a dot, a bolder title and aria-current — never colour alone
- Row actions revealed inline without changing row height
- A considered caught-up state that offers a way back to everything
How to adapt it
- Never reorder the list when something is marked read — people lose their place.
- Group by time, not by type; recency is what someone is scanning for.
- Mark all as read disables itself when there is nothing to mark.
Composed from
Nothing on this screen is new. Every part is an existing component, layout or pattern.