## Next Meeting Card (S—176)

A next-meeting widget that counts down to start, turns its Join button solid when it’s time, and lists who’s attending.

- URL: https://sundaeui.dev/components/meeting-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/meeting-card.json`
- Tags: video-call, meeting, join, widget, calendar, countdown

Shows the next meeting with a relative countdown (“in 4 min”). Within the join window the Join button becomes primary and the countdown switches to “Now”; after the end time it rolls to the next meeting.
Attendees show as initials with their RSVP state, and a copy-link button sits beside Join.

### Usage

```tsx
import { MeetingCard } from '@/components/sundae/meeting-card'

<MeetingCard />
```

### Props

- `meetings` (`{ title: string; start: Date; end: Date; people: { name: string; rsvp: "yes" | "no" | "maybe" }[]; link: string }[]`, required): Upcoming meetings, soonest first.
- `joinWindow` (`number`, default `5`): Minutes before start when Join goes primary.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Dashboards, sidebars, calendar apps, launchers.

### When not to use

- Full schedules: use an agenda.

### Accessibility

- The countdown updates a visually hidden label once a minute.
- Join is a link; RSVP states are in each attendee’s label.
- Reduced motion removes the movement and keeps every state change.