shadcn.io is not affiliated with official shadcn/ui
Streak Counter Task List Block for React
A list of five daily habits with a summary of active streaks and the longest one, a flame and the current streak on every row, the last seven days as dots, one box for today and a plain-words warning when a chain is at risk.
Installation
Overview
Keep a chain alive, with this streak counter to-do list block for React with Base UI. A summary band reads the whole list: how many streaks are active, the longest one now, and how many habits are kept today. Each row shows a flame with the current streak ("12 days"), the best run the habit has had, seven dots for the last seven days to a fixed today, and a Checkbox for today. A chain of three days or more that isn't kept yet says so in words, "Do it today to keep 12", with weight rather than a colour. Ticking today adds a day and unticking takes it back; a streak that passes its best raises the best. There are no pop-ups and no confetti. Guides rule the bands. For habit apps, practice logs and any list where consistency is the point.
FAQ
Where does a streak come from?
Each habit stores the run of days that ends yesterday. The current streak is that run plus one when today is ticked, the dots are drawn from the same run, and the summary is computed from the rows, so none of them can disagree.
When does it say a chain is at risk?
When the run is three days or longer and today isn't ticked. Shorter runs get a gentler line, and a habit with no run says "Start a new chain today". Once you tick, the line says the chain was kept.
How is the best run kept?
The best is the longer of the typed all-time best and the current streak, so ticking today can raise it on the spot and unticking lowers it again.
Can a screen reader read the dots?
Yes. The dots are an ordered list named for the habit, and each dot carries its day and state in text ("Mon: done", "Wed: today, not ticked yet"). The drawn dots themselves are hidden from assistive technology.