Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Timeline blocks

Pro

Gradient Cards Timeline Block for Svelte

Seven monthly savings cells on a rail, tinted in four solid steps by the share of the monthly target reached and named Missed, Close, Almost or Hit, with a target slider that re-tints every month.

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 which months made the target and which did not with this gradient-cards timeline for Svelte with Ark UI. It is written for Stashmonth, a fictional savings-goals app. A hairline frame with a plus mark on each corner holds a van-deposit goal. At the start is the target cell: a slider for the monthly target (150 to 400, starting at 250), the line "Hit 4 of 7 months, longest run 3.", the total saved and the goal. Beside it is a vertical rail of seven monthly cells, April to October. Each cell is tinted by the share of the target it reached, in four solid steps of foreground over the card (under 50, 50 to 79, 80 to 99, 100 and over) and named in words: Missed, Close, Almost, Hit, with the percentage. Moving the slider re-tints every cell and rewrites the line. There is no fade between the steps: they are steps. On a narrower screen the target cell stacks above the rail. It is built from Slider and Guides with CSS for the tints. For savings, quotas, habits and any monthly goal. The figures are example data.

FAQ

How do I change the months and the goal?

Edit MONTHLY at the top of the file (an id, a name and what was saved) and GOAL. The shares, the words, the tints, "Hit 4 of 7 months" and "longest run 3" are derived from the list and the target.

How do I change the steps?

They live in STEPS: the fewest percent that reach a step, its word and a literal Tailwind class that mixes --foreground into --card by a fixed amount. stepOf() picks the last step a share reaches, and the key under the rail is drawn from the same list, so the key and the cells cannot disagree. Keep the classes literal so Tailwind sees them, and keep the text on the cells in the foreground colour so contrast holds on the darkest step.

What counts as a run?

Consecutive months at or above 100 percent of the target. runOf() walks the months in order and keeps the longest streak, so changing the target changes it.

What stays in the page?

The target. Nothing is saved or sent. To make it real, store the target on the goal and pass the monthly deposits in from your ledger.

Is it accessible?

The tint is never the only signal: each cell says the saved amount, the percentage and the word. The slider has a visible label and a value in dollars, and the result is written to a polite status line when you let go of the thumb rather than on every step.

How does it look on a phone?

The target cell sits above the rail, full width, and the cells keep their text in the same two columns.

All 100 timeline blocks