shadcn.io is not affiliated with official shadcn/ui
Conversation List Chat Block for React Aria
A messenger inbox beside its thread: tabs for All, Unread and Groups with derived counts, search, pinned rows, a row menu to mute or archive with Undo, and a typed thread that opens and clears its unread count.
Installation
Overview
Triage a messenger inbox, with this conversation list chat for React with React Aria. A hairline frame with a plus mark on each corner holds a window of fixed height for Ripplewick: the start pane is Messages, a search field and Tabs for All, Unread and Groups, each with a count worked out from the data, over five rows with an initials Avatar, the name, a line of the last message, its time, a pin or muted glyph and an unread Badge. Each row has a More actions menu (Mute or Unmute, Archive, Mark as read) that shows on hover and focus and always on a touch screen, and the foot says what happened with an Undo. Opening a row clears its count and shows its thread of Message and Bubble rows, with a Typing Indicator Text before a typed reply. On a phone the list is the first screen and a row opens the thread with a Back button. The only colored control is the composer's Shine Button, the frame is ruled by Guides, and everything moves with CSS only. It's the starting point for an inbox, a support queue or any list that sits beside a conversation.
FAQ
What stays in the page, and how do I make it real?
Everything. The five conversations, their messages and the replies are typed at the top of this file, and muting, archiving, reading and sending change local state only; the line in the foot says so. To make it real, load THREADS from your API, send post's text to your server where the code says so, and call your endpoints from mute, archive and markRead; keep the local update first and let Undo send the opposite call.
Where do the tab counts and the unread total come from?
They are worked out from the rows, never typed twice. All counts the conversations that aren't archived, Unread those with a count above zero, Groups those that are groups, and the top of the pane totals the unread conversations. Opening a row, marking it as read, archiving it or restoring it moves every number at once. Pinned rows sort first and the rest keep their order.
How does Undo work?
Muting and archiving act at once and the foot's status line names the change, with an Undo button beside it that stays in place when there is nothing to undo, so nothing jumps. Undo restores the last change only: an archived row comes back where it was, a mute flips back. Focus moves to Undo after an archive, because the row you were on is gone.
Can a tab be empty, and what happens to the height?
Yes. Read every unread row, filter to something that doesn't exist, or archive both groups and the list shows its empty state in the same box, so the window never changes height. A search that finds nothing offers Clear search, and archiving the open conversation leaves the thread pane with a quiet "No conversation open".
Is it usable with a keyboard and a screen reader?
Each row is a button whose name starts with its state ("2 unread, pinned") and marks the open one with aria-current. The More actions button is reachable by Tab and shows when focused, and the menu is the library's own, with arrow keys and Escape. The log is a focusable region announced as a log; counts and glyphs always come with words, never color alone.
How does it look on a phone?
One pane at a time. The list is the first screen; choosing a row shows the thread and moves focus to its name, and Back returns to the list with focus on the row you left. Below the medium breakpoint the menu button is always visible and the row's time gives way to it. The window keeps its height and only the list and the log scroll.