## Availability Grid (S—300)

Paint when you are free: drag across a days-by-hours grid to mark or clear slots, with others’ overlap shown as depth.

- URL: https://sundaeui.dev/components/availability-grid
- 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/availability-grid.json`
- Tags: grid, when2meet, group, availability, scheduling, calendar

Press on a cell and drag; the first cell decides whether the drag paints or erases. Your slots are solid, and a small bar in each cell shows how many others are free then.
The best overlapping hour is called out below so a group can settle on a time quickly.

### Usage

```tsx
import { AvailabilityGrid } from '@/components/sundae/availability-grid'

<AvailabilityGrid />
```

### Props

- `days` (`string[]`, required): Column labels.
- `hours` (`[number, number]`, default `[9, 18]`): Start and end hour.
- `others` (`number[][]`): Count of others free per [day][hour].
- `onChange` (`(sel: boolean[][]) => void`): Called after a drag.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Group scheduling, interview slots, tutoring hours.

### When not to use

- Booking a single fixed slot: use time slots.

### Accessibility

- Cells are toggle buttons in a grid labelled with day, hour and how many others are free.
- Arrow keys move; Space toggles.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- Arrow keys: Move
- Space: Toggle a slot