shadcn.io is not affiliated with official shadcn/ui
Inbox Reading Pane Notification Block for React Aria
A shared support inbox as an app window: a list of notifications under All, Unread and Archived views, and a reading pane with the sender, the time, the text, a context list and mark read, archive and undo.
Installation
Overview
Show a whole inbox in one window, with this reading pane for React with React Aria. The window is a fixed-height frame with plus marks on its corners and a top bar that holds the screen's title and a count of unread notifications. Under the bar, the list of eight notifications sits on the start side, headed by a Segment Group for All, Unread and Archived, each with its count. Choosing a row marks it read and opens it in the pane beside it: the sender's initials in an Avatar, the time, a few sentences, and a Data List of context (queue, ticket, owner). The pane's buttons mark the notification read or unread, archive it (the next row takes its place) or restore it. Every archive or restore leaves an Undo in the strip under the list, and an empty view or an empty pane is a designed Empty state. On a phone the list and the pane are one screen at a time: a row opens the pane, and a Back button returns to the list. It's built from Segment Group, Avatar, Data List, Button, Empty and Guides. For a support desk, a shared mailbox or any two-pane inbox.
FAQ
How do I fill it with my own notifications?
Edit TICKETS. Each has an id, a kind (customer, assign, alert or team, which picks the icon), a title, the from name, an ISO at time, a body, the context fields queue, ref and owner, and two flags for how it starts: unread and archived. VIEWS lists the three views. The counts, the unread number in the top bar and the empty states are worked out from those. Times are written in UTC and shown against the constant AS_OF, so they read the same everywhere.
What stays local, and how do I make it real?
Read, unread and archive state live in the page and reset on reload; nothing is sent, and Open ticket only says that tickets don't open here. To make it real, send the id from the choose, mark and archive handlers and take the lists from your API. The Undo strip already knows which row it changes and to which state, so its handler is the reverse request.
Why does a row I just read stay in the Unread view?
So the list doesn't move under your pointer. In the Unread view a row you read stays until you leave the view, and the Unread count still drops at once. Switching to All and back lists only what is unread. The same rule holds for the row that takes the archived row's place.
What do Archive, Restore and Undo do?
Archive moves the open row to the Archived view and opens the next row in the same view, and Restore does the reverse from Archived. The strip under the list then names the row (its ticket number) and offers Undo, which puts that row back in the state it had and opens it. The strip keeps its height whether or not there is something to undo, and focus moves to Undo after each archive or restore so the next step is one key away.
Is it accessible?
Each row's title is a button, the open one is marked aria-current, and unread rows say "Unread" first for a screen reader as well as showing a dot and a heavier title. The segments are a labelled group, the status strip is a polite live region present from the start, and both panes scroll on their own while the window keeps its height. Choose a row with Enter or Space and Tab moves on to the pane.
How does it look on a phone?
The window is a fixed height on every screen. Below the medium breakpoint the list fills it; choosing a row shows the pane instead, with a Back button at its top and focus on its heading. Back returns to the list with that row focused, and archiving from the pane returns to the list with Undo focused.