Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Event Invitation Chat Block for Svelte

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show a group answering an invitation, with this event invitation chat for Svelte with Ark 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.