Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Timeline blocks

Pro

Timeline With Metrics Block for Ark UI

A quarterly snapshot timeline where each node shows MRR, accounts and churn on shared hairlines with an arrow and amount of change, and a toggle switches the baseline between the previous and the first snapshot.

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

Read a business quarter by quarter with this metrics timeline for React with Ark UI. It is written for Snapshelf, a fictional analytics snapshot shelf. A hairline frame with plus marks holds a headline band ("3.4×" MRR since the first snapshot) over a rail of six quarterly snapshots, newest first. Each node has three key figures on shared hairlines, MRR, accounts and churn, and under each an arrow, a sign and the change since a baseline. A "Compare each snapshot with" Toggle Group in the header chooses between the previous snapshot and the first one, and every change is derived again; the oldest snapshot is the baseline and says so. Churn changes are in percentage points, MRR and accounts in percent. The cells stay in one row on a phone. Built from Toggle Group and Guides with a CSS entrance only. For investor updates, product reviews and any series that is judged against a starting point. The figures are example data.

FAQ

How do I change the snapshots?

Edit SNAPSHOTS at the top of the file, oldest first. Each has a quarter, a date, MRR in dollars, accounts and churn in tenths of a percent. Changes and the headline multiple are derived.

What do the two baselines mean?

Previous snapshot compares each quarter with the one before it. First snapshot compares every quarter with the oldest. The oldest quarter has nothing to compare with and shows Baseline.

Why is churn in points?

A change from 2.0% to 2.1% is 0.1 percentage points; a percent of a percent would read as 5%. The arrow shows the direction and the word is read aloud, so a rise or a fall is never carried by colour.

What stays in the page?

Only the chosen baseline, in local state. Nothing is saved or sent.

Is it accessible?

Each node is a list item with a heading, a time element and a description list of the three figures. Arrows are hidden from assistive technology and the direction is written as a word. The status line is a polite live region.

How does it look on a phone?

The headline wraps, the rail stays at the start and the three cells stay in one row.

All 100 timeline blocks