shadcn.io is not affiliated with official shadcn/ui
Group Chat Block for Radix UI
A group thread with four people talking, names over each run, an Admin word, join lines, and overlapping avatars in the top bar that open a roster with a working Copy invite link button.
Installation
Overview
Show a conversation among several people, with this group chat for React with Radix UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Crewholm, a trip-planning group app, with the "Lisbon weekend" thread: Message and Bubble rows from four people, the name in medium weight over the first bubble of each run (never a color), an Admin Badge beside the organiser, each member's initials and time under the last bubble of their run, and a centred line when someone joins. In the top bar, overlapping Avatar Group initials with "+3" open a Popover roster: every member with a role word, you marked, and a "Copy invite link" Copy Button that really copies a typed link. The composer's Shine Button, the only colored control, posts to the group and members answer in turn behind a Typing Indicator Text. The frame is ruled by Guides, and everything moves with CSS only. For a group messenger, a team room or any shared thread with a member list.
FAQ
How does the roster work?
The overlapping avatars are a button (named "Members, 6. Show the roster") that opens a popover with the heading, the members as a list with a role word each ("Admin" or "Member") and the invite link. Edit PEOPLE to change them: the avatars and the "+3" count in the top bar follow, since the count is worked out as the members beyond the first three.
What does Copy invite link do?
It writes the typed link to the clipboard, and the status line under the composer says "Invite link copied." or, if the browser refuses, that it could not copy. The link is a placeholder: generate one on your server per group and show it here.
How are names, avatars and times placed?
One pure function, runsOf, marks every message as first or last of its run: a run continues while the sender stays the same and the next message is within five minutes. The name and Admin word show on the first bubble of someone else's run, and their avatar and the time on the last, with a square tail corner. Yours sit at the end with no name.
What stays in the page, and how do I make it real?
Everything but the clipboard. Members' answers come from a short typed script, as the line under the composer says, and nothing is sent. To wire it for real, send each message to your server where the code says so, append what arrives to the same list and add a system line when someone joins or leaves.
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 "Saoirse Lindgren, 09:05". The avatars are decorative because the name is always in text, and the role is a word. The popover is reached with Tab and closes with Escape.