Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Timeline blocks

Pro

Habit Tracker Timeline Block for React Aria

Four weeks of a daily habit as 28 day nodes on a rail where two done days in a row join with a thick line, with three habits to switch between and a press-to-mark day that recomputes the streaks.

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

Make a streak visible as a heavier line with this habit tracker timeline for React with React Aria. It is written for Tallydays, a fictional habit tracker. A hairline frame with a plus mark on each corner holds 28 days as nodes on a rail: two rows of 14 on a wide screen and four rows of seven, one per week, on a phone. A done day is a filled node, a missed day an outlined one, today is ringed and the days after it are dashed and disabled. The connector between two done days is drawn thick, so a run reads as a heavy stretch of line. Three habits switch the whole rail, and a band of figures shows the current streak, the best streak and the days done, all worked out from the marks. Pressing a day marks or unmarks it up to today and everything is recomputed; the arrow keys move between days, and up and down move by a week. It is built from ToggleGroup and Guides with CSS for the rail. For habits, medication adherence, practice streaks and any daily yes or no. The history is example data.

FAQ

How do I change the habits and the history?

Edit HABITS and START_MARKS at the top of the file. Each habit's history is a string with one character per day from the first day on the rail: 1 for done and 0 for not. FIRST_DAY and TODAY set the window and the day that is ringed.

How is a streak counted?

The current streak is the run of done days that ends today, or yesterday while today is not marked yet, so an unmarked evening does not zero it. The best streak is the longest run in the window. Both are pure functions of the history string.

What stays in the page?

The marks. Nothing is saved or sent and the days after today cannot be marked. To make it real, store one record per habit and day and load the window from your database.

How do I use it with the keyboard?

The rail is one tab stop. Left and right move one day, up and down move a week, Home and End jump to the first day and today, and Enter or Space marks the day. Focus follows the arrow.

Is it accessible?

Every node is a real button with a hidden full date and a pressed state, so done is never only a colour or a fill. The streak figures are text and the result of each press is announced in a polite status line.

How does it look on a phone?

Four rows of seven, one per week, with the day number under each node. The thick connector stops at the end of each row.

All 100 timeline blocks