shadcn.io is not affiliated with official shadcn/ui
Unread Count Badges Sidebar Block for Svelte
A shared notification inbox in a fixed-height window whose sidebar shows an unread count on each folder, capped at 99+, with group totals, Mark all read and a reset.
Installation
Overview
Show how much is waiting in each folder with this unread count badges sidebar for Svelte with Ark UI. A window framed by a hairline with a plus mark on each corner holds the Sidebar for Sagepost, a shared notification inbox. Two groups, Inboxes and Teams, list eight folders, and each carries its unread count as a badge that stops at 99+ while its link and tooltip keep the exact number. A group's label shows its own total with the same cap. Opening a folder clears its count and the totals follow, Mark all read clears every folder, and Reset demo puts the sample counts back. The page lists the open folder's latest notifications, the new ones marked with a dot and the word New, and a quiet Empty state for the folder with nothing in it. It's built from Sidebar, Sidebar Menu Badge, Button, Avatar, Empty and Guides, with a CSS entrance only. For notification centers, shared inboxes and any rail with counts that clear.
FAQ
How does the 99+ cap work?
The badge prints the count, or 99+ once it is above 99, so a badge never grows wider than three characters. Only the print is capped: each link's name and tooltip carry the exact number ("Deploys, 134 unread"), and a screen reader hears that. A group's total is capped the same way. Support starts at exactly 100 and Platform at exactly 99, so you can see the edge on both sides.
When does a count clear?
When you open the folder. Its badge goes away at zero, the group total drops by that many and the status line says how many notifications were marked read. Mark all read does the same for every folder at once, and when nothing is unread the button answers in words instead of doing nothing. Reset demo restores the starting counts and reopens Mentions.
How do I tell which notifications were new?
When you open a folder, the rows that were unread keep a dot, bold text and the word New for as long as you stay on it, even though the count has already cleared. Moving to another folder drops the marks. The marks are a shape, a weight and a word, never a color.
What stays in the page, and how do I connect it?
Everything. The folders, their starting counts and the notifications are typed at the top of the file, and nothing arrives. In your app, take the counts from your server (or count the unread rows you hold) and call your mark-read endpoint in the open and Mark all read handlers. The folders are links to # whose handler shows the folder instead of navigating. 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 a tooltip shows each folder with its count on hover or focus. The badges and group totals are hidden then, as they are in the catalog. 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 it sits on.
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 folder closes it and focus goes back to the menu button. The window keeps its height, and the status line at its foot says what changed.