shadcn.io is not affiliated with official shadcn/ui
Chat App Sidebar Block for React Aria
A team chat app in a fixed-height window whose sidebar lists channels and direct messages with unread counts and presence glyphs, sorted by activity, A to Z or unread first from a menu.
Installation
Overview
Keep a busy channel list in order with this chat app sidebar for React with React Aria. A window framed by a hairline with a plus mark on each corner holds a muted Sidebar for Huddlebrook, a team chat app, with six channels and four direct messages. A Dropdown Menu of three radio items in the Channels header, Activity, A to Z and Unread first, reorders both lists. Unread rows are bold with a count, direct messages carry a presence glyph (filled online, half filled busy, a ring offline) with the word in the row's name, opening a conversation clears its count and Mark all read clears them all. The page is the open conversation's messages in a labelled log, the new ones marked. It's built from Sidebar, Sidebar Menu Badge, Dropdown Menu, Avatar, Button and Guides, with a CSS entrance only. For team chat, support desks and any rail of conversations.
FAQ
How do the sort modes work?
Activity puts the most recent conversation first, using a typed number of minutes since its last message. A to Z orders by name. Unread first puts every conversation with unread messages ahead of the rest, each half in activity order. The menu sorts the channels and the direct messages together, and the status line names the mode.
How does unread work?
A conversation with unread messages is bold and shows its count. Opening it clears the count and marks that many of its newest messages New for as long as you stay on it. Mark all read clears every conversation at once and, when nothing is unread, answers in words. Under Unread first, a conversation drops to the read part of its list once you open it.
How is presence shown without color?
By shape and by word: a filled circle is online, a half-filled one is busy and a ring is offline. Each direct message's accessible name ends in the word ("Calder Whitfield, Online, 3 unread"), so the shape never carries it alone.
What stays in the page, and how do I connect it?
Everything. The conversations, their messages and their unread counts are typed at the top of the file, and there is no composer, so nothing is sent. In your app, load the conversations and their last-activity times from your server, sort them with the same three rules and clear the count in your open handler. The rows are links to # whose handler shows the conversation instead of navigating. They're SidebarMenuButtons with href, which React Aria renders as a link. Point them at your routes and mark the current one with isActive.
What happens when the sidebar collapses?
The rail folds to its icons, one per conversation, and a tooltip shows the name with its count. The sort menu and the badges are hidden then. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page.
How does it work on a phone?
Below the medium breakpoint the sidebar becomes a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. The sort menu moves to the top bar, because a menu does not open reliably from inside a sheet, and Mark all read becomes an icon with its name for screen readers. The window keeps its height, and the status line at its foot says what changed.