shadcn.io is not affiliated with official shadcn/ui
Tabbed Inbox Notification Blog Block for React Aria
A post-alert inbox: All and Unread tabs with counts, rows with an unread dot that clears when opened, a Mark all read button and an unread count in the header, all derived from the rows.
Installation
Overview
A post-alert inbox for React with React Aria, written for Gavelmoor, a policy-news blog. A start-aligned header carries a count of unread alerts at its end ("3 unread alerts"). Under it, a tab band (All and Unread, each with its count) has a ghost "Mark all read" button at its end, and six alerts run as rows rail to rail. An unread alert has a filled dot and a bold title; opening it (its title is the row's one link) clears the dot and lowers every count. In the Unread tab a row you just read stays where it is, quiet, until you leave the tab. It is built from Tabs, Badge, Button and Guides. For a blog that wants readers to see what is new. Which alerts are read lives on the page only and resets on reload.
FAQ
Where do the counts come from?
From one list of read ids. The header, the Unread tab and the rows all derive from it, so they cannot disagree. Opening an alert adds its id, and Mark all read adds every id; the button is aria-disabled when nothing is unread, and stays focusable.
Why does a read row stay in the Unread tab?
So the list never jumps under your pointer. The Unread tab lists what was unread when you opened it. A row you read turns quiet (hollow dot, lighter title) and stays until you switch tabs, when the list is taken again. If nothing is unread, the tab says so.
Does the block change height between tabs?
No. Every row is drawn once more, unseen, in the same cell, so the block holds the height of the fullest list whichever tab is open.
How is read or unread shown without colour?
By the dot (filled or hollow), the title's weight and, for a screen reader, a hidden "Unread:" or "Read:" in front of the title. The dot itself is hidden from assistive technology.