shadcn.io is not affiliated with official shadcn/ui
Streak Notification Block for React
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 Base 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.
Related
- 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 medal shelf for a learning platform after a learner finishes a first project: eight drawn medals in a hairline grid with a New badge on the latest, and a popover on each medal with its criteria, a progress bar and the day it was earned.
- Pro
A subscriber milestone notice for a newsletter platform: 10,000 in a rolling number with a Replay from 9,999, a CSS ruler with ticks at 1k, 5k, 10k and 25k that names the next mark and what is still to go, and a thank-you post you can copy.
- Pro
Do Not Disturb Notification
Quiet and digestsA focus app's do-not-disturb panel: a status card that says in a sentence what the settings amount to, a 24-hour strip of the muted hours, one hour, until tomorrow or a nightly schedule, and the calls that still get through.
- Pro
Progress Tracker Changelog
Roadmap and customersA progress tracker for a project tool: four framed cells, two by two, each with a ring filled to the share of its tasks done, its name, a count like 7 of 12 tasks, a target quarter and a Remaining tasks row that opens to the list.
- Pro
First Project Success
Account lifecycleA confirmation page for a first project: the new project as three facts, four firsts in a grid of hairline cells with the next one lit and each pickable to read what it takes, one Open the project button and a thin fall of confetti that plays once.