shadcn.io is not affiliated with official shadcn/ui
Community Room Chat Block for React
A live community room with flat rows and a Members pane grouped by role with derived counts and a Rules collapsible, plus a View as switch that gives moderators a menu to delete a message or mute a member for 10 minutes.
Installation
Overview
Show a public room with roles and a moderator's view, with this community room chat for React with Base UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Brackenford Commons, a community of makers, in its open-bench room: a thread of flat rows on one side and a Members pane at the end. The pane lists the 12 members grouped by role with derived counts (Admin 1, Mod 2, Members 9) and a "Room rules" Collapsible that starts open and closes for the session with "Got it". A Segment Group in the top bar switches the view between Member and Moderator: as a moderator, each member's message gets a "More actions" Dropdown Menu with "Delete message", which turns the row into "Removed by a moderator", and "Mute for 10 min", which moves the member to a Muted list in the pane with an Unmute button. Roles are words and glyphs, never colors, and the room's live mark is a still dot. The composer's Shine Button, the only colored control, sends what you type. On a phone a Toggle Group shows Chat or Members, one at a time. For communities, forums and any room that needs moderation.
FAQ
What stays in the page, and how do I make it real?
Everything. The members, the messages and the replies are typed in this file, and deleting or muting changes only local state; nobody is really moderated and nothing is sent. To wire it for real, call your moderation endpoints from the two menu handlers, keep the mute timer and its expiry on your server, and refresh the pane from the same data.
How are the role counts and groups worked out?
Each group's count is the length of its filtered list, not a typed number, so muting a member moves them from their group to the Muted list and every count stays true. Roles are shown as a word and a shield glyph (Admin, Mod); members carry none. Moderators can act only on members, never on staff or on themselves.
What do Delete and Mute do?
Delete replaces the message with an italic "Removed by a moderator" in the same place, so the thread keeps its shape, and the menu goes away for that row. Mute adds the person to the Muted list with a "10 min" label and an Unmute button; while they are muted, the scripted replies come from the admin instead of them. The status line says what changed.
How do the rules behave?
They start open the first time you see the room. "Got it" closes them and says so, the trigger opens them again, and they stay closed for the session. The content is inert while closed, so its button leaves the tab order.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, each menu button is named for its message ("More actions for the message by Callum Reardon"), the view switch has a visible "View as" label, and the pane's groups are headings. Time stamps of later rows in a run appear on hover and on focus, and always on a phone.