shadcn.io is not affiliated with official shadcn/ui
Team Collaboration Chat Block for Radix UI
A team channel in flat rows with a Members pane: typing @here, @channel or @design marks the people it reaches with Will be notified and says how many in a line above the field.
Installation
Overview
Show who a group mention will reach before it is sent, with this team collaboration chat for React with Radix UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Huddlework, a team messenger, in its launch-week channel: the thread is flat Message and Bubble rows, and at the end sits a Members pane with eight people, each with a presence word (Online, Away or Offline) and a role. The composer opens on "@here standup moved to 10:30": the pane puts "Will be notified" with a bell glyph on the three members who are online, and the line above the field reads "@here notifies 3 of 8: online now". @channel reaches all eight and @design, a group of three, reaches its members whether they are online or not. Sending posts the message with the mention underlined, a line saying how many people were notified in this demo, and, behind a Typing Indicator Text, a typed reply from a teammate. The composer's Shine Button is the only colored control, and on a phone a Toggle Group switches between Chat and Members. The frame is ruled by Guides, and everything moves with CSS only. It's the starting point for a team channel, a workspace chat or any room where mentions have consequences.
FAQ
How does the block work out who a mention reaches?
Three typed groups, @here (the members whose presence is Online), @channel (everyone) and @design (three named members), are listed in GROUPS. A pure function finds the mentions in the text, joins their members without repeats, and the pane and the line above the field both read that one result, so the count can never disagree with the marks. Two mentions together notify the union of both.
How is a notified member shown without colour?
The member's second line changes from "Online, Engineer" to a bell glyph and the words "Will be notified" in medium weight, and the row gets a faint tint. The words carry the meaning, so it reads the same in grayscale, in either theme and to a screen reader. Presence is a word and a ring shape (solid, open or dashed), never a colour.
What stays in the page, and how do I make it real?
Everything. Nobody is notified, and the teammate's reply comes from a short typed script, as the line under the window says. To wire it for real, send the message and the mention tokens to your server where post says so, let the server resolve @here against live presence, and append what comes back to the same list.
Why are there no person mentions here?
This block is about groups. Completing a name with @ is its own block, Mention Autocomplete, and the two can share a composer: a person's mention would simply add one id to the reached list.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, and each message starts with a hidden name and time. The line above the field is tied to the field with aria-describedby, and one status line under the window announces what was sent. The avatars are decorative because every name is in text.