shadcn.io is not affiliated with official shadcn/ui
Notifications Panel Dashboard Block for React Aria
An Activity panel whose bell opens a notification panel, shown open over a drawn feed: Today and Earlier groups with type icons, ISO times, unread dots, Mark all as read and a live count on the bell.
Installation
Overview
Show what changed since the last visit from the bell in a top bar, with this notifications panel for React with React Aria. The Activity panel's header holds the bell, a real outline Button whose name and count follow what is unread. Under it a drawn feed of three skeleton rows stands for the page, and over the feed the Popover is shown open: four notifications in two groups, Today and Earlier, each with a type icon, its title, an ISO time and an unread dot. Pressing one marks it read and the count on the bell goes down; Mark all as read clears the rest, and Notification settings says it leads to a page of your own. Unread is a dot, a heavier title and a spoken word, never a colour. Press the bell and the real, non-modal Popover opens with the same list and state; Escape closes it with focus back on the bell. The panel in place is the preview's: in your app keep the Popover and drop the open copy. It's built from Popover, Badge, Button and Guides. For top bars and app shells.
FAQ
How do I fill it with my notifications?
Edit NOTES. Each has an ISO time, a title, a type for its icon and whether it was unread when the page opened. AS_OF is the moment "now" is, so Today, Yesterday and the weekday are worked out from it and never from the visitor's clock. The groups, the count on the bell and the sentence in the header are derived from the list.
Which part is only for the preview?
The panel drawn in place on load: a native non-modal dialog over the feed, so nothing is trapped or focused when the page opens. It closes when you press the bell, press Escape inside it, or reload brings it back. The real Popover below the bell is the one to keep; both show the same content and share the same state, so what you did in one is there in the other.
How does the count work?
The bell shows how many notifications are unread, and its accessible name says it too ("Notifications, 3 unread"). Pressing a row marks that one read; Mark all as read marks the rest and then answers "Nothing unread". The count is hidden at zero.
What stays local, and how do I wire it for real?
The notifications are typed, read state lives in the page and nothing is sent or saved. To make it real, load the list and the unread count from your service, call it when a row is opened or all are marked read, and have a row link to the thing it is about. Wire Notification settings to your preferences page.