shadcn.io is not affiliated with official shadcn/ui
Event Invitation Chat Block for React
A narrow group chat with an invitation card: a Going, Maybe or Can't go choice, guest answers that arrive after yours and re-count the faces, and an Add to calendar button that saves a real .ics file.
Installation
Overview
Show a group answering an invitation, with this event invitation chat for React with Base UI. A hairline frame with a plus mark on each corner holds a narrow window of fixed height for Gatherton, a social-events app: Calla has posted a harvest supper, and the card shows the date block, "Thu 15 Oct, 18:30 to 20:00", the place, a count such as "7 going, 2 maybe" with a stack of faces, and a Segment Group of Going, Maybe and Can't go that starts on Maybe. Your first answer posts a system line and three guests answer about a second apart, each with a line of their own, while the count and the Avatar group re-derive. "Add to calendar" saves a real .ics file. The composer's Shine Button is the only colored control, and the frame is ruled by Guides.
FAQ
What stays in the page, and how do I make it real?
The guest list, the three arrivals and the replies are typed in the file; nothing is sent, and the guests only answer because your press started a short script. Under reduced motion all three answers appear at once. To wire it for real, send the answer to your events API in answer and apply the guests' answers to the guests list as they arrive.
How are the counts worked out?
The "going" and "maybe" numbers are counted from the guest list plus your own answer, in one place, so the sentence, the faces and the "+N" always agree. Changing your answer moves you between the counts; there is no second copy of any number.
What is in the calendar file?
A single event with a title, the start and end times as a floating local time, the place and the note, written with CRLF line ends. It is built from the same constants the card shows, so the two cannot disagree. Opening it adds the event to most calendar apps.
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. Send stays quiet while the field is empty and says so if pressed, and focus returns to the field after sending. Replies come from a short typed script keyed on words in your message, with one fallback per message and a last line that says it was the last sample reply.
Is it usable with a keyboard and a screen reader?
The invitation is an article named by its title, the answer is a labelled choice you can change with the arrow keys, and each guest's answer is a system line in the log, which is announced. The faces are hidden from assistive technology because the count is in text.