shadcn.io is not affiliated with official shadcn/ui
Central Spine Timeline About Block for React
A 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.
Installation
Overview
A vertical company timeline for React with Base UI, written for Bridgemoor, a fictional banking API. Eight events hang off one hairline: on wide screens they alternate sides of a central spine, and below lg the spine moves to the start side and every event sits on one side. The node on the spine tells the kind of event by its shape, a ring for a product, a square for people and a dot for a milestone, with a small legend under the heading, and each event also names its kind in a badge, so the shape never carries the meaning alone. Every event has a time in relative terms ("Year 3"), a title and a sentence, and opens a Collapsible to a longer account and a list of what shipped; the first one is open when the page loads. The spine starts at the first node and stops at the last. It's built from Collapsible, Badge and Guides, with a CSS entrance and your theme's tokens for every colour. For company histories on about pages and investor pages that have more than six events to tell. The company and its events are example content.
FAQ
How do I add or change events?
Events are EVENTS at the top of the file. Each has an id, a kind (product, team or milestone), a when, a title, a description, a longer detail and a shipped list. The sides alternate by position, so the first event is on the start side; add or remove events and the alternation follows. To add a kind, extend Kind, KIND_LABEL and nodeShape.
Is the node's shape the only way to tell the kind?
No. The shape is a quick read for sighted users, and each event also carries its kind as a badge with a word, "Product", "Team" or "Milestone", which is what a screen reader gets. The nodes themselves are decorative and hidden from assistive technology.
How do the details open and how do they behave with a keyboard?
Each event's "What happened next" is a Collapsible trigger, a real button that Tab reaches and Enter or Space toggles, with its open state exposed to assistive technology. The first event is open on load through defaultOpen; on React Aria the same prop is defaultExpanded, which the page already uses. The panel's height eases open, and with reduced motion it simply appears.
What changes on a phone?
Below lg the central spine becomes a rail on the start side, the nodes sit on it and each event reads in one column, in the same order. Nothing scrolls sideways at 320 pixels. In a right-to-left layout the sides swap by themselves, because the columns and offsets are logical.
Related
- Pro
Horizontal Track Timeline About
TimelinesA 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.
- 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
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
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
Alternating Chapters About
Company storyA company story in three alternating split rows, each with a time, a title, a paragraph, a one-line metric, a pull quote and a greyscale drawing of the product at that chapter, the sides swapping row to row.