Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Timeline blocks

Pro

Fitness Log Timeline Block for React

Seven workouts over two weeks on a rail whose connector is 1, 2 or 4 px wide for an Easy, Steady or Hard session, with weekly totals and zone toggles that light the workouts you pick and dim the rest.

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

Show how hard each session was with this fitness log timeline for React with Base UI. It is written for Zonelog, a fictional running log. A hairline frame with a plus mark on each corner holds two weeks of workouts on a vertical rail, and the line arriving at each workout is thin, medium or thick for an Easy, Steady or Hard session. Each row has a sport icon in a tile, the session name, its date, a bar for the minutes and the average heart-rate zone in words. A week head works out its own total and the number of hard days. Three zone toggles in the band above light the workouts of the zones you pick and dim the others, and the status line says how many are lit. It is built from ToggleGroup and Guides with CSS for the rail. For training diaries, rehab logs, practice schedules and any record where effort matters as much as date. The workouts are example data.

FAQ

How do I change the workouts?

Edit WORKOUTS at the top of the file: an id, the sport in kind, the minutes, a name, the ISO day in on, the week id and the zone (easy, steady or hard). Week heads, totals and hard-day counts are derived, and the weeks themselves live in WEEKS.

How do I change the line thicknesses and the zone words?

They live in EASY, STEADY and HARD: a literal width class for the connector, a literal height class for the key and the zone label. Keep the classes literal so Tailwind sees them.

What stays in the page?

Which zones are lit. Nothing is saved or sent, and no heart-rate data is read. To make it real, load each workout and its average zone from your tracker and keep the lit zones in the URL.

Can I switch every zone off?

No. The last lit zone refuses to turn off and the status line says to keep at least one on, so the rail never goes fully dim.

Is thickness the only signal?

No. Each row also says the zone in words, and a dimmed workout carries a hidden "dimmed" note for screen readers. The toggles have a visible label and the result is announced in a polite status line.

How does it look on a phone?

The same rail at the start with the text at its end. The toggles wrap under the label, and the panel height does not change when you dim workouts.

All 100 timeline blocks