shadcn.io is not affiliated with official shadcn/ui
Notification Center Dashboard Block for Radix UI
Eleven notifications grouped by source with unread counts and a Mark as read per group, full text and a typed action in place, and a Focus switch that holds back everything not urgent.
Installation
Overview
Read your notifications by source and quiet the rest when you need to concentrate, with this notification hub for React with Radix UI. A Switch, "Focus until 17:00", sits at the header's end: turned on, it holds back every notification not marked urgent, the urgent ones stay, and the sentence above the panel says how many are held back. Below, a hairline frame with a plus mark on each corner holds three groups (Deploys, Billing and Mentions), each a disclosure band with its count, how many are unread, its newest line and a ghost Mark as read of its own. Opening a notification shows its full text in place with the action named for its type (Open the incident, Open the invoice, Open the thread) and marks it read. The groups keep their height whatever the Focus switch hides. It's built from Switch, Button and Guides, with the bands as native disclosure buttons. For in-app notification pages and inboxes.
FAQ
How do I fill it with my notifications?
Edit GROUPS. A group has a name and its notifications, newest first; a notification has a title, the time it arrived, its full text, the label of its action, whether it was unread and whether it is urgent. The counts, the newest line of each band and the sentence above the panel are all worked out from those.
What does the Focus switch hide?
Everything not marked urgent. A group with nothing urgent says "Everything here is held back" in place of its rows, and the group's height does not change: the hidden rows are held by an unseen copy of the full list. Turning Focus off brings every notification back, with the read state you left them in.
How does read state work?
Opening a notification marks it read, and Mark as read in a group does it for all of that group's unread; each answers in the polite status line, and a group with nothing unread answers "already read". Unread is a dot, a heavier title and the word "Unread" for a screen reader, never only a colour.
What stays local, and how do I wire it for real?
The notifications are typed, the read state lives in the page and no action opens anything. To make it real, load the notifications from your service, send read state back as it changes, and have each action link to the object it names. Persist the Focus setting and its end time per user.