shadcn.io is not affiliated with official shadcn/ui
Concert Planning Chat Block for Radix UI
A group chat planning one show: a plan card where each friend is In or Out with a tier and an amount, your own toggle and tier select, a derived group total and a Lock in Saturday button that wakes at four people.
Installation
Overview
Show friends settling a night out, with this concert planning chat for React with Radix UI. A hairline frame holds a window of fixed height for Gigholm, a gig-going group's planner: Mireille, Pell and Dag are in the thread and Mireille posts a plan card for The Tallow Kites at Cindergate Hall. Each friend is In or Out with a tier and an amount; yours is a Toggle and a Native Select of Floor, Seated and Balcony, and the group total, such as 4 in, $200, is derived from the rows. Lock in Saturday stays quiet until four are in. The composer's Shine Button is the only colored control.
FAQ
What stays in the page, and how do I make it real?
Everything. The replies come from a short typed script in this file, picked by words in your message, then one fallback per message and a last line that says it was the last sample reply. The friends' answers are typed; only your row changes. The lock posts a line and nothing is bought. Nothing is sent and no model runs, as the line under the composer says. To wire it for real, read each person's answer from your group service and send the lock to your ticket seller.
How is the group total derived?
By one helper over the rows: everyone who is In adds the price of their tier, and the count and the sum are shown together. Switch yourself out and the total drops; change your tier and it moves. The prices are examples.
When does Lock in Saturday work?
From four people in. Before that the button is quiet and pressing it says how many are needed. After it, the toggle, the select and the button lock and the log gets a system line.
How does the composer work?
Enter sends and Shift and Enter add a line, which the field's description says for a screen reader; Enter during text composition (an IME) is left alone. The field grows with its content up to a limit. Send stays quiet while the field is empty and says so if pressed, and focus stays in the field after sending.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden name and time. Each reply starts with the friend's name. In and Out are a glyph and a word, and your tier is a labelled select. The avatars are hidden from assistive technology because the name is always in text.