shadcn.io is not affiliated with official shadcn/ui
Notification Bell Changelog Block for React
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 Base UI, 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.
Related
- Pro
Bookmark Saves Changelog
Votes and sharingA release list you can save from: six releases as hairline rows in a framed list, each with a bookmark toggle, under a header with All and Saved tabs whose counts follow your saves and an empty state when nothing is saved.
- Pro
Subscribe Updates Changelog
Votes and sharingA changelog split with an email form at the start (a field that checks itself, an Every release or Weekly digest choice and a Shine Button) and the three latest releases at the end.
- Pro
Reaction Votes Changelog
Votes and sharingFour release rows, each with four reaction toggles drawn with icons (a thumb, a heart, sparkles, a party popper) whose counts move up by one when pressed and back when pressed again.
- Pro
Release Timeline Changelog
Lists and timelinesA release timeline for an API client: a compact header with a Subscribe link, then the latest four releases on a hairline rail with dots, each with its version, date, type tags, a linked title and its notes, and View all releases at the foot.
- Pro
Notification Bell Navbar
Meters and progressAn app navbar for a team inbox with a bell whose count follows what you do: the bell opens a panel with All and Unread tabs, rows you can mark read, mark unread or dismiss, and Mark all as read, and a drawer on phones.
- Pro
Announcement Banner Changelog
Spotlights and mediaA release announcement for a product-announcement tool: the latest release as the headline with three audience tabs that change its highlights and a Shine Button, and behind a split divider an Earlier list of the three releases before it.