shadcn.io is not affiliated with official shadcn/ui
Horizontal Track Timeline About Block for Solid
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 Solid with Ark 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.