Habit Tracker

Life · HabitTracker, Panel

Habits with their last days as a row of marks: done, missed or no entry, today's mark a toggle.

days is one entry per day, oldest first and today last: true, false or null.
streak shows "12-day streak"; goal a short target ("8 glasses").
onToggle(id, done) makes today's mark a button; the other days are read-only and named for screen readers ("Mon Done").
Day labels default to weekday initials ending today; pass dayLabels to set them yourself.

PreviewCode

Habits

This week

Morning walk3-day streak20 min

Drink water12-day streak8 glasses

Read3× a week

No screens after 10 pm

Prop	Type	Notes
`habits`	`Habit[]`	Required
`dayLabels?`	`string[]`	Labels of the day columns, oldest first (default: weekday initials ending today).
`onToggle?`	`(id: string, done: boolean) => void`	Today's box of a habit was toggled.
`label?`	`string`	Accessible name of the list (default "Habits").
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Prop	Type	Notes
`side?`	`boolean`
`title?`	`string`
`subtitle?`	`string`
`action?`	`ReactNode`
`children?`	`ReactNode`
`surface?`	`Surface`	`"glass"`: translucent glass over what is behind (maps, 3D, video, photos); `"solid"` opts out inside a glass `UIProvider`.
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.