shadcn.io is not affiliated with official shadcn/ui
Audio Rooms Chat Block for Radix UI
The text side of a live audio room: a stage band with four seats and raised hands, a Listener or Host view that lets the host invite hands to speak, and a flat room chat.
Installation
Overview
Show the people side of a live audio room, with this audio rooms chat for React with Radix UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Echomere, a live audio app: a band above the log shows the stage, four seats with initials, the name and "Speaking" or "Muted" as a word and a microphone glyph, and the raised hands. A Segment Group switches between Listener and Host; as host each raised hand gets "Invite to speak", which moves that person to the stage, and each guest gets a button that sends them back. A Toggle raises your own hand, and the chat below is flat Message rows. There is no audio and the microphone is never asked for. The composer's Shine Button, the only colored control, sends your message. It's the starting point for a live event, a podcast recording room or any stage with an audience.
FAQ
What stays in the page, and how do I make it real?
Everything, and there is no audio at all: the page never asks for the microphone, and the line under the composer says No audio in this demo. People, hands and the stage are typed state, and chat replies come from a short script. To wire it for real, connect the stage to your audio service, send invites to your room API, and read the raised hands from it.
What changes in the Host view?
Raised hands gain Invite to speak and speakers other than the host gain a button that moves them to the audience. The stage has four seats; a full stage says so in the status line and refuses the invite until someone steps down. Listener view hides the buttons without moving anything.
How does Raise hand work?
It is a pressed toggle that adds you to the raised hands and counts you; pressing it again lowers your hand. It is disabled while you are on the stage, and the status line says what happened.