## Notification Matrix (S—103)

A notification preferences grid: events down the side, channels across the top, with whole-column toggles.

- URL: https://sundaeui.dev/components/notification-matrix
- Category: Forms & inputs · 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/notification-matrix.json`
- Tags: checkbox, settings, preferences, matrix, notifications, email

Each cell is a compact checkbox. Column headers toggle a whole channel, so “turn off all email” is one click, and their state shows mixed when only some rows are on.
Changes show a small “Saved” confirmation after a short pause instead of a save button.

### Usage

```tsx
import { NotificationMatrix } from '@/components/sundae/notification-matrix'

<NotificationMatrix />
```

### Props

- `events` (`{ id: string; label: string; hint?: string }[]`, required): Rows.
- `channels` (`{ id: string; label: string }[]`, required): Columns.
- `value / defaultValue` (`Record<string, string[]>`): Channel ids enabled per event.
- `onValueChange` (`(v: Record<string, string[]>) => void`): Called on change.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Account and workspace notification settings.

### When not to use

- More than four channels on mobile: split by channel instead.

### Accessibility

- A real table: column headers are toggle buttons with aria-pressed (mixed shown in text); cells are checkboxes labelled "Event via Channel".
- Autosave status is a polite live region.
- Reduced motion removes the movement and keeps every state change.