## Shift Roster (S—441)

Plan a week of shifts: tap cells to cycle Off, Early, Late and Night, with coverage gaps and hours per person.

- URL: https://sundaeui.dev/components/shift-roster
- 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/shift-roster.json`
- Tags: roster, staff, shifts, scheduling, week, coverage

Each tap cycles a cell through the shift types. The coverage row flags any day missing a required shift.
Hours per person total in the last column and turn into a warning past the weekly limit.

### Usage

```tsx
import { ShiftRoster } from '@/components/sundae/shift-roster'

<ShiftRoster />
```

### Props

- `people` (`string[]`): Staff names.
- `limit` (`number`, default `40`): Weekly hours before a warning.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Restaurants, clinics, retail and support team scheduling.

### When not to use

- Large rosters with skills and availability: use workforce software.

### Accessibility

- Each cell is a button named by person, day and shift.
- Coverage gaps are listed as text, not only marked.
- Reduced motion removes the movement and keeps every state change.