shadcn.io is not affiliated with official shadcn/ui
Notification Dots Sidebar Block for React
A team inbox in a fixed-height window whose muted sidebar marks places with something unseen by a dot, lit one at a time by a Simulate an update button and cleared by opening the place.
Installation
Overview
Say something changed without saying how much with this notification dots sidebar for React with Base UI. A window framed by a hairline with a plus mark on each corner holds a muted Sidebar for Pingfield, a team inbox, listing Documents, Tasks, Calendar, Messages, Files and People. Three places start with a small dot for something unseen. Simulate an update, a Button on the page, lights the next place in a fixed order, Documents then Calendar then People, and a status line says what happened ("Documents was edited"). Opening a place clears its dot and marks its new entries with the word New, and a line at the top of the page counts the places that have updates. Collapsed, the rail keeps each dot on its icon. It's built from Sidebar, Sidebar Menu Badge, Button, Avatar and Guides, with a CSS entrance only. For team workspaces and any navigation where an update matters more than its size.
FAQ
Why dots and not numbers?
Some updates have no useful count: a document was edited, an event was added. A dot says that something is waiting and leaves the size for the page. The dot is a filled circle in the foreground color, so it works in any theme, and the link's name says it too ("Tasks, has updates") because a dot alone says nothing to a screen reader.
What does Simulate an update do?
It plays one of three typed updates, in a fixed order: Documents, Calendar, People. Each adds an entry at the top of that place's activity and lights its dot, unless you are looking at that place, in which case the entry appears marked New with no dot. When all three have played the button answers in words that every place has been updated once.
Where does the 2 items have updates line come from?
It is counted from the same state as the dots: the number of places with unseen entries. Open a place and the line and the dot change together, so they cannot disagree.
What stays in the page, and how do I connect it?
Everything. The places and their entries are typed at the top of the file, and nothing real arrives. In your app, set a place's unseen state from your realtime source or a poll, and clear it in the open handler once the entries have been shown. The places are links to # whose handler shows the place instead of navigating. They're SidebarMenuButtons with render set to an a element. Point them at your routes and mark the current one with isActive.
What happens when the sidebar collapses?
The rail folds to its icons and each dot moves to the corner of its icon, with a ring in the rail's color so it stays clear of the glyph. Tooltips add "(new)" to a place with updates. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page.
How does it work on a phone?
Below the medium breakpoint the sidebar becomes a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. Choosing a place closes it. The page keeps its own copy of the state: the Simulate an update button, the count line and the status line are all on the first screen. The window keeps its height, and the status line at its foot says what changed.