shadcn.io is not affiliated with official shadcn/ui
Activity Streak Stats Block for React Aria
A 26-week contribution grid of daily lessons with month labels, a Less to More key and a band of three counters for the current streak, the longest streak and the active days.
Installation
Overview
A study streak for React with React Aria. A start-aligned header says how long the current streak is, "A 23-day streak, one lesson at a time". Under it, one framed grid shows the last 26 weeks of lessons, one square a day: weeks run across, Monday to Sunday run down, month names sit above and Mon, Wed and Fri on the rail. A square is one of five solid steps of your theme's foreground colour (no lessons, 1, 2, 3 to 4, 5 or more) and a Less / More key sits under the grid. A band of three counters ends the block, rail to rail: the current streak with where it began, the longest streak and the active days, each rolling up once when it scrolls into view. The squares and the counters are counted from the same list of daily lessons at module scope, never typed twice. The window is fixed (a first Monday and 26 weeks), so nothing depends on today's date. On a phone the grid keeps the newest 12 weeks and the counters stack as rows. For habit apps, learning platforms and any daily practice.
FAQ
How do I use my own days?
Replace LESSONS near the top of the file with one number per day, oldest first, starting on a Monday: 182 numbers for 26 weeks (a day with no activity is 0). The streaks, the active days, the squares and the table for screen readers are all computed from it. FIRST_MONDAY sets the date of the first square, only to name the months above the grid; change WEEK_COUNT and PHONE_WEEKS to show a different span.
How are the streaks counted?
A streak is a run of days that each have at least one lesson. The longest streak is the longest run in the 26 weeks, and the current streak is the run that ends on the last day (zero if the last day has no lesson). The counter's second line names the week and weekday the current streak began, and the active days count every day with a lesson, out of all 182.
What do the five shades mean?
The steps are solid mixes of the foreground colour into the card, from almost nothing to the full foreground colour: no lessons, 1, 2, 3 to 4, and 5 or more. They are mixes, not transparency, so no line shows through, and they come from your theme, so they follow light and dark. The key under the grid shows the five in order and the caption says what each step counts.
Is the grid accessible?
The drawing is one image with a text summary (active days, the longest streak and the current one), and an unseen table lists the lessons of every day, a row per week, so no number depends on shade. The counters are a description list, the numbers sit in bdi elements and the grid is forced left to right, so months and weeks run from the start of the line in every language, including right-to-left pages.
What happens on a phone?
The grid keeps the newest 12 weeks, so the squares stay big enough to tell apart at 320 pixels, and the month labels are recomputed for those weeks so the first one always carries a name. The key stays under the grid, and the three counters become rows with the label at the start and the number at the end. Nothing scrolls sideways.