shadcn.io is not affiliated with official shadcn/ui
Networking Event Chat Block for React Aria
An attendee list beside an event room: filter eight people by topic, press Ask for a chat to get Requested and then Accepted, and every request posts a line in the room.
Installation
Overview
Help people at a conference find each other, with this networking event chat for React with React Aria. A hairline frame with a plus mark on each corner holds a wide window of fixed height for Hallwise, a conference app: at the start the Attendees list, with eight people shown by role and company as text and two topic Badges each, and beside it the event's #hallway room in flat Message rows. A Toggle Group of topics (Design, Data, Hiring, Fundraising) filters the list, any topic matching, and "Requested" narrows it to people you asked, with a derived "4 of 8" count; a filter that matches no one shows an empty state with Clear filters. "Ask for a chat" turns into Requested with a clock glyph, posts "You asked Priya for 15 minutes. Nothing was sent" in the room, and a moment later the attendee "accepts": the row says Accepted with a check and the room gets a line. Typing in the room gets a typed reply behind a Typing Indicator Text; the composer's Shine Button is the only colored control. On a phone the list comes first and "Open #hallway" opens the room, with Back to return. The frame is ruled by Guides, and everything moves with CSS only. It's the starting point for an event app, a community directory or any list of people you can ask for time.
FAQ
How does the topic filter work?
Each attendee carries two topic ids. With nothing pressed everyone shows; with topics pressed a person shows if any of their topics is pressed, and Requested adds a second condition (you asked them). One pure function, passes, decides, and the count and the list both read it. Press Design and Requested with no request made and the empty state appears without the window changing height.
What happens when I press Ask for a chat?
The button keeps its place and size but its words change to Requested with a clock glyph (aria-disabled, so it stays focusable), a system line is added to the room, and after about two seconds the attendee accepts: the word becomes Accepted with a check and a second line is added. The one request already made when the window loads is answered after a few seconds. The button's accessible name always ends with the person's name.
What stays in the page, and how do I make it real?
Everything. Nothing is sent and nobody is asked: the lines say so, and the acceptance is a timer. To wire it for real, send the request to your server where ask is called, store its state per attendee, and apply the answer when your server pushes it.
Is it usable with a keyboard and a screen reader?
The list is a focusable scroll region, each row's button is named with the attendee, the topic toggles are a labelled group, and one status line under the window announces every change. Roles and companies are plain text, and the avatars are decorative.