shadcn.io is not affiliated with official shadcn/ui
Streak Maintained Success Block for Ark UI
A panel for a reading streak kept alive: the streak counted up to 14 days, a progress bar to the Weekly Warrior badge, and a five-week table of days read, missed and still to come.
Installation
Overview
Reward a habit the day it holds with this confirmation panel for React with Ark UI. It is the panel Leafstreak, a reading-habit app, shows after a day's reading: a compact header says the streak is alive, and one framed panel opens with the streak counted up by Counting Number over a full-width Progress bar to the Weekly Warrior badge, with the days still to go. Below it a real table shows the last five weeks, Monday to Sunday: days read are filled, a missed day is hollow, today is ringed and days to come are blank, and every cell says its date and state in text. The foot holds the Shine Button, View awards. For habit, learning and fitness apps.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was recorded. The days read are typed in READ as dates, and the date of the latest reading in AS_OF. To wire it, fill READ from the reader's log, set AS_OF and the grid's first Monday in START, and set the badge length in BADGE_AT. The streak, the longest run and the days to go are all counted from that list.
How is the streak counted?
It is the number of days in a row that were read, counting back from AS_OF until the first missed day. The longest run is the best such run inside the five weeks shown. The bar is the streak over the badge's length, capped at full.
Is the grid usable with a screen reader?
Yes. It is a native table with a hidden caption and column headers that expand to the weekday names, and each cell reads its date and state, for example "12 Oct, read" or "30 Sep, not read". The state is also drawn without color: filled, dashed or blank, with today ringed.
What moves?
The panel fades up once and the streak counts up once. With reduced motion both appear at once. Nothing loops.