shadcn.io is not affiliated with official shadcn/ui
Unread Only List Notification Block for Ark UI
An inbox with an unread-only switch and a live count, where a row you read stays in place until you turn the switch off, and zero unread is a designed Inbox zero state.
Installation
Overview
Let people focus on what's new without the list jumping under them, with this unread list for React with Ark UI. The header holds the title, one sentence and a Switch labelled Unread only. Inside a hairline frame with a plus mark on each corner, a band shows the live count ("5 unread of 9") and below it nine notifications scroll in one fixed height. Unread is a dot, a heavier title and the word Unread for a screen reader. Pressing a title marks the row read; with the switch on, the row stays exactly where it is, with a quiet Read tag, until you turn the switch off, so the list never moves while you work through it. When nothing is unread and the switch is on, the list becomes an Empty state (Inbox zero) in the same height, with a button that shows everything. A polite status line in the foot says what each action did. It's built from Switch, Button, Empty and Guides, with a CSS entrance only. For a project inbox, a task tracker's notification page or any list with a read state.
FAQ
How do I fill it with my own notifications?
Edit NOTES at the top. Each has an id, a kind (assign, comment, due, failed or done, which picks the icon), a title, a line of desc, an ISO at time and whether it starts unread. The unread count, "of 9" and the list that the switch shows are worked out from that array. Times are written in UTC and shown against AS_OF (today as a clock time, yesterday as a word, older as weekday and date), so the page reads the same on the server and in every time zone.
What stays local, and how do I make it real?
The read state lives in the page and resets on reload. To make it real, load the notifications from your API and send the id from the press handler (a title would normally open its task; here it marks the row read and says so). Keep the held rows as they are: they are the rows read since the switch last changed, kept in a list, and they clear whenever the switch flips.
Why does a row stay when I read it with the switch on?
Because removing it would pull every row below it up under your pointer, and the next press would land on the wrong row. The row keeps its place, loses its dot and its heavier weight, and shows a Read tag with a check mark, so the change is still a shape and a word, not a color. Turn the switch off and on again and only what is still unread is listed.
How do I reach the empty state?
Turn Unread only on, press every unread title, then turn the switch off and on again: nothing is unread, so the list is an Inbox zero state in the same height as the rows, with a Show all button that turns the switch off. The frame, the count band and the foot do not move.
Is it accessible?
The switch is named Unread only and works from the keyboard with Space. Each title is a button, and unread rows speak "Unread" first, so state never rests on the dot or the weight alone. The count band and the status line report the numbers in text; the status is a polite live region present from the start, and the list scrolls inside its own region so the page keeps its length.