shadcn.io is not affiliated with official shadcn/ui
Meeting RSVP Dialog Block for Svelte
A team calendar's week with its reply dialog shown open: the event, a three-way Going, Maybe or Can't go answer, an optional note, and the guests by answer with their counts, moving as you choose.
Installation
Overview
Let people answer an invitation and see where they land among the other guests, with this RSVP dialog for Svelte with Ark UI. It opens from the week page of Tidegate, a team calendar: the page's header holds an outline Reply to Design crit Button, and the week, five day columns with grey event blocks and one invitation on Thursday, is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The Dialog shows the event (its day, its time, who organises it), a large three-way Segment Group (Going, Maybe, Can't go, each with an icon), a note to the organiser in a Textarea that only Maybe and Can't go use, and the guests by answer with their counts: Going 4, Maybe 1, Declined 1, No reply 2. Choosing an answer moves your name to that group at once, shown as a solid You pill among the guests' initials. Send response is the only Shine Button; it keeps the answer and the invitation on the week behind the dialog changes shape: solid for Going, dashed for Maybe, struck through for Can't go. For preview the dialog is drawn open in place when the page loads; the header's button opens the real dialog. For calendars, events, shifts and any invitation that needs an answer.
FAQ
Why is the dialog already open, and what do I keep?
So you can see it without a click. On load the dialog is a copy drawn in place over the week: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Reply button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same ReplyFields component and share the block's state. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
How do the counts and the guest list work?
They are worked out from the typed GUESTS list and your own answer, so the numbers always add up to eight and can't drift from the initials beside them. Before you choose, you sit in No reply; pick an answer and the You pill leaves that group and joins yours, and the counts and the polite status line ("Going. Going 5, Maybe 1, Declined 1, No reply 1") follow. Each group also carries its names in text for a screen reader, since the initials are decoration. In your app replace GUESTS with the event's attendees and compute the same counts.
When does the note apply, and what stays local?
The note field is for Maybe and Can't go; with Going or no answer the same space reads a short sentence instead, so the dialog never changes height when you switch. Nothing is sent: Send response keeps your answer in this page's state, redraws the invitation on the week and says so in the status. With no answer chosen it says to choose one and moves focus to the answers. In your app send the answer and the note to your calendar's API and update the guest list from its response; the note is cleared once it is kept.
Why does the invitation change shape and not colour?
So the answer reads without hue, in every theme and for colour-blind readers: solid for Going, dashed for Maybe, struck through for Can't go, and a plain outline before any answer. The drawing is hidden from assistive technology under the scrim; the same answer is in the status line and the page's sentence, which changes from waiting for your reply to the answer you gave.
Is it accessible from the keyboard?
Yes. The real dialog is named by its title and described by its sentence, focus starts on the answers, and Escape, Cancel and the close button return focus to the Reply button. The answers are one group you move through with the arrow keys. The trigger is the Reply button wrapped in DialogTrigger with asChild, and the dialog is controlled with open and onOpenChange.
How does it look on a phone?
The copy shown on load docks to the foot of the page as a bottom sheet with its buttons pinned and the content scrolling above them. The guests stop being four cells and become four rows, each with its label, its count and its initials, so the count stays beside the people. The real dialog keeps the Dialog's own phone layout, a sheet stuck to the bottom of the screen.