shadcn.io is not affiliated with official shadcn/ui
Streak Maintained Success Block for React
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 Base 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.
Related
- Pro
Streak Tracker Dialog
Time and schedulingA habit app's list with a daily check-in dialog shown open: a flame and the days in a row, a five-week calendar with this week's days large, milestones at 7, 14 and 30, and a check-in that moves the number.
- Pro
Winning Streak Awards
TimelinesChains of year nodes for a language-learning app: a check for a year won, a hollow node for a year not won, a link joining consecutive wins, with the current streak counted large for the lead category.
- Pro
A page for reaching a new level: the XP a lesson earned counted up, a bar that wraps from a full Level 4 to Level 5 with its 20 XP carry-over, three unlocked perks, and a quiet fall of confetti.
- Pro
A page for the week weekly active users passed 10,000: a greyscale medal, a line of twenty weeks with the crossing marked and described in text, a ring of the way to the next milestone, and a quiet fall of confetti.
- Pro
A page for a revenue goal passed at 108%: a bullet chart with a tick at 100%, three sub-goals each with a signed difference, a group of buttons that raises the next target by 10, 20 or 30 percent, and a Celebrate button that throws confetti.
- Pro
Two-Factor Recovery Codes Success
Security and accessA two-step sign-in confirmation page: what was turned on, eight single-use recovery codes in a framed sheet with copy and download, and a Finish setup button that stays dimmed until you tick that you saved them.