shadcn.io is not affiliated with official shadcn/ui
Tabbed Inbox Notification Blog Block for React
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 Base UI, 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.
Related
- Pro
Topic Switch Subscribe Blog
Subscribe and alertsTopic subscriptions as six Switch rows with a line and posts per month each, a live summary that counts the topics and posts, and a Save preferences button with an honest confirmation.
- Pro
Latest Posts Blog
Featured storyJust published: the newest post as a lead band in large type with a pulsing dot and a New mark, three earlier posts as rows with unread dots, and a Mark all as read button.
- Pro
Reading List Blog
Reading toolsFive saved articles with a bookmark toggle on each: un-saving strikes the row through in place with an Undo link, and the foot reads the derived totals, like 5 saved, 46 min to read.
- Pro
Inline Subscribe Newsletter Blog
Subscribe and alertsAn end-of-post newsletter sign-up: an email field with the Subscribe button inside it, a message slot that never moves, and a confirmation that replaces the form in the same space.
- Pro
Email Digest Blog
Subscribe and alertsA morning briefing shown as the email it is: drawn mail chrome, four summaries and an unsubscribe line, with a Switch that turns them into monospaced plain text.
- Pro
Tabs Layout Blog
Post listsA film-criticism reading list with three underline tabs, Latest, Popular and Editor's picks, each drawing a different row: dated rows, ranked rows with read counts, and rows with an editor's note.