Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Todo List blocks

Pro

Streak Counter Task List Block for Vue

A list of five daily habits with a summary of active streaks and the longest one, a flame and the current streak on every row, the last seven days as dots, one box for today and a plain-words warning when a chain is at risk.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Keep a chain alive, with this streak counter to-do list block for Vue with Ark UI. A summary band reads the whole list: how many streaks are active, the longest one now, and how many habits are kept today. Each row shows a flame with the current streak ("12 days"), the best run the habit has had, seven dots for the last seven days to a fixed today, and a Checkbox for today. A chain of three days or more that isn't kept yet says so in words, "Do it today to keep 12", with weight rather than a colour. Ticking today adds a day and unticking takes it back; a streak that passes its best raises the best. There are no pop-ups and no confetti. Guides rule the bands. For habit apps, practice logs and any list where consistency is the point.

FAQ

Where does a streak come from?

Each habit stores the run of days that ends yesterday. The current streak is that run plus one when today is ticked, the dots are drawn from the same run, and the summary is computed from the rows, so none of them can disagree.

When does it say a chain is at risk?

When the run is three days or longer and today isn't ticked. Shorter runs get a gentler line, and a habit with no run says "Start a new chain today". Once you tick, the line says the chain was kept.

How is the best run kept?

The best is the longer of the typed all-time best and the current streak, so ticking today can raise it on the spot and unticking lowers it again.

Can a screen reader read the dots?

Yes. The dots are an ordered list named for the habit, and each dot carries its day and state in text ("Mon: done", "Wed: today, not ticked yet"). The drawn dots themselves are hidden from assistive technology.

What stays local, and how do I wire it for real?

The history and the ticks live in the page and reset on reload. In an app, save a done flag per day, derive the run on the server, and write from tick. Missed days that should be forgiven (a rest day, a freeze) belong in that same derivation.

How does it look on a phone?

The dots drop under the habit's text, lined up with its title, and the three summary figures stay in one row. Nothing scrolls sideways at 320 pixels.

All 100 todo list blocks