## Call Grid (S—303)

A video call on one card: tiles that reflow, the active speaker outlined, mute and camera toggles, and leave.

- URL: https://sundaeui.dev/components/call-grid
- 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/call-grid.json`
- Tags: video-call, mute, meeting, conference, tiles, participants

Tiles reflow from one to a 2 × 3 grid as people join. Camera-off tiles show initials; muted people carry a slashed mic. The active speaker gets a thick outline that moves as the demo talks.
The control bar has mute, camera, a hand raise and Leave, which asks to confirm.

### Usage

```tsx
import { CallGrid } from '@/components/sundae/call-grid'

<CallGrid />
```

### Props

- `people` (`{ id: string; name: string; muted?: boolean; cam?: boolean }[]`, required): Participants other than you.
- `onLeave` (`() => void`): Called on leave.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Meeting apps, telehealth, classroom tools.

### When not to use

- Large webinars: use a speaker view with a list.

### Accessibility

- Controls are toggle buttons with aria-pressed and clear labels.
- Speaker changes and hand raises are announced politely.
- Reduced motion removes the movement and keeps every state change.