shadcn.io is not affiliated with official shadcn/ui
Streak Notification Block for Radix UI
A habit-app streak notice: the run in a rolling number, this week as seven day cells where today fills in when you press Mark today done, an Undo, and a Streak freeze switch that says in words what a missed day would do.
Installation
Overview
Keep a daily habit in front of someone without nagging, with this streak notice for React with Radix UI. It is Sproutdays, a habit app, in one hairline frame with a plus mark on each corner. The top band rolls the run in a Sliding Number beside a Badge that says "Open today" or "Done today", with the best run underneath. A strip of seven day cells shows this week: finished days are filled with a check, today is ringed, the days to come are dashed. Mark today done, the one Shine Button, adds a day and fills today's cell; Undo takes it back. A Switch for Streak freeze says what a missed day would do. Guides draw the lines. For habit, learning and fitness apps.
FAQ
Is the streak saved?
No. Marking today only changes the page, and a reload puts it back. The week and the run before today are typed (WEEK, BEFORE, BEST); in your app read them from your records and save the day when the button is pressed, then show the new run.
What does the freeze switch do?
It changes the sentence beside it: on, "a freeze is on, so one missed day will not end the streak"; off, a missed day would start again at 0. Nothing is used up in this demo. In your app spend the freeze on the server when a day is missed.
How do the seven cells show their state?
By shape and by words: a filled disc with a check is done, a ringed one is today and open, a dashed one is a day to come. Each cell also carries a hidden word ("Done", "Today, not done yet", "Later this week") and today has aria-current="date". The cells keep their size in every state.
How is this week chosen?
The seven days are typed ISO dates around a fixed "today" (Wednesday 14 Oct), so the page reads the same everywhere. In your app derive the week from the viewer's date.
Is it accessible?
The week is a labelled list, the switch has its name and its sentence tied by description, and one polite status line reports each press ("Marked today done. 12 days in a row."). Undo and the main button stay focusable and readable when they have nothing to do, and say why when pressed.