shadcn.io is not affiliated with official shadcn/ui
Channel List Chat Block for React Aria
A team workspace's channels in a start pane: a filter that counts, collapsible Starred, Channels and Direct messages sections, a star that moves a channel between them, and each room's flat log beside it.
Installation
Overview
Find your way around a team workspace, with this channel list chat for React with React Aria. A hairline frame with a plus mark on each corner holds a window of fixed height for Lanternquay: the start pane has the workspace name with a menu (Mark all as read), a filter that counts ("4 of 9") and three Collapsible sections, Starred, Channels and Direct messages, of rows with a hash tile or an initials Avatar, a member count and an unread Badge. A Toggle star on each channel moves it between Starred and Channels, and a collapsed section keeps a dot when something inside is unread. Opening a row clears its count and shows that room's log as flat Message rows, with a Typing Indicator Text before a typed reply. On a phone the list is the first screen and a row opens the log with a Back button. The composer's Shine Button is the only colored control, the frame is ruled by Guides, and everything moves with CSS only. It's the starting point for a team chat, a community server or any app with rooms.
FAQ
What stays in the page, and how do I make it real?
Everything. The nine rooms, their messages and the replies are typed at the top of this file; starring, reading and sending change local state and the foot line says nothing is sent. To make it real, load ROOMS from your API, call your endpoints from star and markAll, and send the composer's text where the code says so.
How does starring move a channel?
Each channel is placed in a section by its data: starred ones in Starred, other channels in Channels, people always in Direct messages. Pressing the star flips one flag, so the row moves at once and the status line says where it went. The star shows on hover and focus and is always visible on a touch screen.
What happens to unread counts in a collapsed section?
The section header keeps its count of rooms and gains a small dot with a hidden "Unread inside" for screen readers, so collapsing never hides that something is waiting. Opening a room clears its own count, and Mark all as read clears every room.
How does the filter work?
It matches names as you type and the line under the field reads "4 of 9". A section with no match hides, and a filter that finds nothing shows an empty state in the same box with Clear filter, so the window keeps its height.
Is it usable with a keyboard and a screen reader?
Each section header is a heading holding a disclosure button, rows are buttons that mark the open one with aria-current, and each star is a named toggle ("Star design"). The log is a focusable region announced as a log, and the later rows of a run take focus so their time shows.