shadcn.io is not affiliated with official shadcn/ui
Notification Feed Reviews Block for Ark UI
A merchant review inbox for a greenhouse-kit maker: Tabs for All, Needs action and Replies with counts, a Mark all as read button and full-width ruled rows under day dividers with inline Approve, Reply and Mark read.
Installation
Overview
A review inbox for React with Ark UI, for Egretby, a fictional maker of greenhouse kits. Under a compact header, a band holds Tabs for All, Needs action and Replies, each with its count, and a "Mark all as read" button at the end. Below, full-width ruled rows are grouped under day dividers that carry the page's rule and + marks. A row has an event icon (new review, reply, approval, helpful votes, mention), an unread dot with "Unread" in text, a headline, a line of detail, the time and inline actions: Mark read on every unread row and, on rows that wait for a decision, Approve or Reply. Pressing an action changes the row in place ("Approved", "Reply noted", "Read") and updates the counts; a polite status says what happened and that nothing was published or sent. An unseen copy of every row holds the height, so switching tabs never moves the page. On a phone the actions wrap under the text and the detail line is clamped to one line. It's built from Tabs, Button and Guides.
FAQ
Where do the counts come from?
From the typed rows. All is the number of rows, Needs action is the rows that still wait for a decision (an approval or a reply) and haven't had one in this visit, and Replies is the rows that are customer replies. Approving a review takes it out of Needs action and updates the number at once. Edit ITEMS at the top of the file to use your own events.
What do Approve and Reply do?
They change local state and say so. Approve marks the row "Approved" and a polite status says the review was approved in this demo and nothing was published; Reply marks it "Reply noted" and says nothing was sent. To make them real, call your own endpoint from the decide handler. A pressed button stays where it is and changes its words, so keyboard focus is never lost; in the Needs action view, where the row then leaves the list, focus moves to the next row's first button.
How is unread shown without colour?
By a filled dot, bolder headline text and the words "Unread" for screen readers; once read, the dot disappears (its space is kept) and the button beside it says "Read". The buttons' names include the person, for example "Approve: Marit Solheim", so a list of them is understandable out of context.
How do the Tabs and the Mark all as read button work?
Each tab filters the same rows, and an unseen copy of the full list keeps the block's height whichever view is open. Mark all as read clears every dot at once and is announced with how many it cleared; when nothing is unread it stays focusable and says so instead of doing anything.
The Tabs are controlled with value and onValueChange, which hands over details.value.