shadcn.io is not affiliated with official shadcn/ui
Horizontal Track Timeline About Block for React
A company timeline drawn as one horizontal track: six milestones in relative time, each a cell of a ruled band with a dot on the rule, turning into a vertical rail on phones.
Installation
Overview
A company timeline for React with Base UI, written for Rootstock, a fictional maker of soil sensors and irrigation plans for growers. Six milestones sit on one horizontal track, from "Year 1" to "Year 6, now": the track is a band ruled from rail to rail, each milestone is a cell with a hairline between it and the next, and a dot sits on the rule at the start of every cell, filled for the newest one. Each cell has a time, a short title and two sentences. Below lg the track turns upright: one rail runs down the start side with a dot per milestone, in the same order. Times are relative ("Year 3", never a calendar year), so the block does not go stale. It's built from Guides, with a CSS entrance and your theme's tokens for every colour. It has no state, so it renders on the server. For about pages, press kits and any page that has to show six years in one glance.
FAQ
How do I change the milestones?
They are MILESTONES at the top of the file: each has an id, a when, a title and a description, and the newest one carries latest so its dot is filled. The track is a six-column grid on wide screens, so keep six; with fewer or more, change lg:grid-cols-6 to match.
How is the timeline read by a screen reader?
The milestones are an ordered list, so the order is announced ("1 of 6") and each one is a heading with its time above it and its description below. The dots and the rail are decorative and hidden from assistive technology; nothing depends on seeing them.
Why is there no calendar year?
A year printed in a timeline is wrong the day after it ships. The times are counted from the start of the company ("Year 1", "Year 6, now"), so only the last label ever needs editing. If you prefer dates, put them in when as text, or wrap them in a time element with a dateTime attribute.
What happens on a phone?
Below lg the cells stack into one column with a rail down the start side and the dot on it at each milestone; the rail stops at the last dot. Nothing scrolls sideways at 320 pixels. In a right-to-left layout the track runs from the right and the rail sits on the right, because every offset is logical.
Related
- Pro
Central Spine Timeline About
TimelinesA company timeline on a central spine: eight events that alternate sides on wide screens, a ring, square or dot node by kind, and a collapsible detail with what shipped.
- Pro
Bubble Plot Key Moments About
TimelinesA company's key moments as a bubble plot on a time axis, each bubble sized and raised by impact with the three that changed the company filled in, and the same moments as a ruled ordered list beneath.
- Pro
Rounds Funding Timeline About
TimelinesA funding history as three round cells, each with the amount, the lead investor, an undisclosed valuation and a segmented bar of where the money went whose four parts add to 100 percent.
- Pro
Chaptered Origin Story About
Company storyA company's origin story as four long chapters of prose beside a sticky chapter index that follows the reader, turning into a row of chips on phones.
- Pro
A product's history as a version scrubber: a stepped slider from v1 to v6 grows a drawing of the app panel by panel while two notes say what changed and who it helped.
- Pro
Timeline Hero
Updates and timelinesA start-aligned hero with a headline, a Shine Button and an outline action over a closing band of four milestone rows on a vertical hairline, shipped, current and planned.