Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Todo List blocks

Pro

Habit Tracker Task List Block for Svelte

A week table of six habits by day with a tickable cell for each, days still to come kept closed, a streak and a share of the week for every habit, and a foot row that counts what each day got done.

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

See a whole week of habits at a glance, with this habit tracker to-do list block for Svelte with Ark UI. A real table lists six habits down the side and Monday 12 to Sunday 18 October across the top, with one native checkbox in each cell named by the habit and the day ("Read for twenty minutes, Monday 12 Oct"). Today is a fixed Wednesday, marked by the word Today in its column head and a quiet tint, so Monday to Wednesday can be ticked while Thursday to Sunday stay closed and say so. Each habit's streak is the run of days that reaches back from today (or from yesterday while today is open) and on through a typed earlier run, and its week share is the days done out of the days so far. The foot row counts what each day got done. Guides rule the frame. On a phone each habit becomes its name over a row of seven cells, with the streak and share in a line under the name. For habit apps, study plans and any routine you review by the week.

FAQ

How is a streak counted?

From today backwards while the days are ticked; if today isn't ticked yet it counts from yesterday, so an open day doesn't zero the streak. When the run reaches Monday it carries on through the habit's typed earlier run, so a streak can be longer than the week.

Why can't I tick Thursday?

Days after today are closed: their checkbox is disabled, drawn dashed, and named "not open yet". Today is a fixed date in the data, so the same cells are open on every visit.

What is the Week figure?

Days ticked out of the days so far this week, as a percentage. On Wednesday it is out of three, so two ticks read 67%.

Is it still a table for a screen reader?

Yes. The habit is the row header and each day is a column header with its full date, so a cell is announced with both. Native checkboxes in a table give Tab and Space with no extra script.

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

The ticks live in the page and reset on reload. In an app, store a done flag per habit per date and write it from tick; keep the streak derived, as here, so it can never disagree with the cells.

How does it look on a phone?

The table keeps its seven day heads in one row and each habit becomes its name with a summary line over seven cells. Nothing scrolls sideways at 320 pixels.

All 100 todo list blocks