shadcn.io is not affiliated with official shadcn/ui
Teams Style Chat Block for Radix UI
A team channel with Posts, Files and Members tabs showing derived counts, framed message rows with your own on a thick start border, a file list with copy-name buttons, and a composer that rests on other tabs.
Installation
Overview
Show a team channel, with this team style chat for React with Radix UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Teamsheet, a cooperative's team app. Under the top bar, Tabs read Posts, Files and Members with counts taken from their lists. Posts is the thread in framed rows built from Message and Bubble: every message a full-width bordered row, yours with a thick start border, a run under one header. Files lists a name, a size and who added it, with a Copy Button that copies the file name; Members lists initials, names and a role. The composer, with the Shine Button as the only colored control, shows on Posts only; elsewhere its place holds one line, so the height never changes. The frame is ruled by Guides, and everything moves with CSS only. For a project channel, a club or any team space.
FAQ
What do the tabs hold?
Posts is the live thread, Files a typed list and Members a typed roster with roles. The counts on the tabs are the lengths of the lists, so a post you send raises the Posts count. Only the open tab is rendered.
Why does the composer disappear on Files and Members?
Messages belong to Posts, so the composer is hidden and made inert there, and its cell shows "Messages are in Posts". Both share one grid cell, so the window and the tab panels keep their height.
What stays in the page, and how do I make it real?
Everything. The replies come from a short typed script in this file: a few keyed on words in your message, then one fallback per message and a last line that says it was the last sample reply. Copying a file name uses the real clipboard; nothing downloads. Nothing is sent and no model runs, as the line under the composer says. To wire it for real, send the text where the code says so and append incoming messages to the same list.