shadcn.io is not affiliated with official shadcn/ui
Conversation Info Chat Block for React Aria
A group's info panel: an editable description, members with a role word and a menu to make an admin or remove, six drawn shared-media tiles, a mute switch, and a Leave group confirm that ends in a Rejoin state.
Installation
Overview
See everything about one group in a panel, with this conversation info chat for React with React Aria. A hairline frame with a plus mark on each corner holds the info of Weekend ridgewalkers, a hiking group on Moorstep. Bands run from an Editable description to the members, each with an initials Avatar, a role Badge and, on rows you may act on, a More actions menu with Make admin and Remove from group (a removal can be undone). Shared media shows six drawn tiles and See all 24, and a Switch mutes the group with a sentence saying what it does. The header's Add people, a Shine Button, is the only colored control and adds the next typed person. Leave group opens an Alert Dialog; confirming it swaps the panel for an empty state, "You are out of Weekend ridgewalkers", with Rejoin, in the same height. The frame is ruled by Guides, and everything moves with CSS only. It's the starting point for a group or channel details screen.
FAQ
What stays in the page, and how do I make it real?
Everything. The members, the description, the mute switch and leaving are local state; the status line says each change happened in this demo, and Add people draws from a short typed list, never from contacts. To make it real, call your API from addPerson, makeAdmin, remove, commitAbout, flipMute and leave, and load the members instead of MEMBERS.
Who can be acted on?
You are an admin, so the menu shows on members who are not admins; your own row and other admins have none, and the space stays reserved so the roles line up. Make admin changes the role word at once. Remove strikes the name through and offers Undo in the same row, so nothing shifts.
What happens when I leave the group?
A destructive confirm asks first, with focus on the safe button, Stay in the group. Confirming swaps the bands for an empty state of the same height and moves focus to Rejoin, which brings the panel back with your changes kept. The header's Add people and the foot's Leave group go quiet while you are out of the group.
Does See all 24 open anything?
No, and it says so in the status line. The six tiles are drawn with the theme's own tones, not photos, because a shared-media viewer is a separate feature.
Is it usable with a keyboard and a screen reader?
The description edits with Enter and Escape, each menu button names its person ("More actions for Calder Winslow"), the switch is labelled by its heading and the confirm is an alert dialog. State always has words: the role, "removed in this demo" and the mute sentence.