## RSVP Card (S—156)

An event card with Going / Maybe / Can’t go; your avatar joins the attendee stack and the counts update as you choose.

- URL: https://sundaeui.dev/components/rsvp-card
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/rsvp-card.json`
- Tags: avatars, attendees, invite, event, rsvp, calendar

The date block, title and place sit above a three-way choice. Picking Going slides your avatar into the stack of attendees and bumps the count; switching moves it.
An Add to calendar link appears once you are going.

### Usage

```tsx
import { RsvpCard } from '@/components/sundae/rsvp-card'

<RsvpCard />
```

### Props

- `event` (`{ title: string; date: Date; place: string }`, required): Event.
- `attendees` (`string[]`, required): Initials of people going.
- `onRsvp` (`(r: "yes" | "maybe" | "no") => void`): Called on change.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Event invites, meetups, team offsites, webinars.

### When not to use

- Ticketed events with payment: use a checkout.

### Accessibility

- The choice is a radiogroup; counts are announced.
- The avatar stack has a text label like “14 going”.
- Reduced motion removes the movement and keeps every state change.