Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA month calendar where each click marks a day done or not, computing the current and the best streak and refusing future days. Use this when a habit or practice is logged day by day and the run of consecutive days matters.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it when a habit or practice is logged day by day and the run of consecutive days matters.
Do not use it for scheduling; use calendar-grid with a range.
It composes calendar-grid and date-time-core, which the CLI installs for you.
import { HabitStreakCalendar } from "@/components/habit-streak-calendar"<HabitStreakCalendar onValueChange={(days, streak) => save(days)} />| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | string[] | [] | Days marked done (ISO). |
| onValueChange | (days: string[], streak: { current; best }) => void | - | Days and the streaks. |
| today / locale | - | - | Reference day and locale. |
The pattern ships with a Testing Library test (habit-streak-calendar.test.tsx) that covers the streak rules, toggling, future days and a streak that ended yesterday.