shadcn.io is not affiliated with official shadcn/ui
Central Spine Timeline About Block for Radix UI
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 Radix 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.