shadcn.io is not affiliated with official shadcn/ui
Notification Bell Changelog Block for React Aria
A release feed with a bell: an unread count in a chip, the latest three releases as rows with unread markers, and a popover that marks them read and holds Email and Push switches.
Installation
Overview
A release feed with a bell for React with React Aria, written for Chimeup, a fictional in-app notification kit. A start-aligned header carries the title and one sentence, with a bell button at its end showing how many releases you haven't read in a foreground chip. Under it the latest three releases are rows between the page's rails, each with a marker (a filled dot and the word Unread while unread, a ring once read), its version, day and type tags, a linked title and a sentence. Opening the bell lists the same three in a panel, keeps Unread on the ones that were unread when you opened it, marks them all read, so the chip goes away, and says how many in a polite status. Two switches under the list set Email and Push. "Mark all unread" starts the demo over. Nothing is saved: it resets on reload. The rows end the block, so no closing rule is drawn; on a phone the bell sits under the header. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Popover, Switch, Badge, Button and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For product changelogs that want an in-app way to show what's new. The releases are example data.
FAQ
When does a release count as read?
When the bell opens: every unread release is marked read at that moment, the chip disappears and a polite status says how many were marked. The panel keeps the Unread marker on the ones that were unread at that moment, so you can see what you just cleared; the rows under the header show them as read. Change setOpenTo to mark them only when the panel closes, or per row.
How can I tell unread from read without colour?
By shape and by word: unread is a filled dot and the word Unread, read is a ring with no word, and each title carries a hidden "(unread)" or "(read)" for screen readers. The bell's own name says the count: "Notifications, 3 unread".
What do the Email and Push switches do?
Nothing beyond this page: each flips its own state and a polite status says "Email notifications on" or "Push notifications off". Wire pickEmail and pickPush to your preferences API. The switches are the text colour when on, never the primary.
How does it work with a keyboard?
Tab reaches the bell; Enter or Space opens the panel and Escape closes it, returning focus to the bell. Inside the panel Tab moves through Mark all unread and the two switches; Space flips a switch. Opening the panel marks the releases read, which is announced once.
How do I change the releases?
Edit RELEASES at the top of the file, newest first, with a version (also each release's id), an ISO date, its kinds, a title and a summary. Keep it to the latest three: the bell is for what's new, and older releases belong behind a link.
How does it fit on a phone and in a right-to-left layout?
Below md the bell sits under the header, and the panel is as wide as the screen allows (at most the width minus two rems). Nothing scrolls sideways at 320 pixels. In a right-to-left layout the rows mirror and the chip sits on the bell's other corner, while the version numbers stay left to right.