## Habit Streak (S—157)

A habit card with this week’s days to tick off, a streak counter that rolls up and a best-streak marker.

- URL: https://sundaeui.dev/components/habit-streak
- 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/habit-streak.json`
- Tags: checklist, goals, tracker, streak, habit, week

Tap today (or any past day this week) to mark it done; the check draws in and the streak number rolls. Missing a day in the middle visibly breaks the run.
Future days are disabled. The best streak sits beside the current one for motivation without confetti.

### Usage

```tsx
import { HabitStreak } from '@/components/sundae/habit-streak'

<HabitStreak />
```

### Props

- `name` (`string`, required): Habit name.
- `done / defaultDone` (`boolean[]`): Seven booleans, Monday first.
- `todayIndex` (`number`, required): Index of today (0 = Monday).
- `best` (`number`): Best streak so far.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Habit, fitness, learning and wellbeing apps.

### When not to use

- Tracking quantities: use a log with numbers.

### Accessibility

- Days are checkboxes labelled with the weekday and state; future days are disabled.
- The streak count is announced politely.
- Reduced motion removes the movement and keeps every state change.