Timeline 8 - Vertical changelog timeline with date badges

Pro

A centered vertical changelog timeline with a connecting line, date badges, and bullet lists of product updates with bold, italic, and underlined phrases.

Shadcn Timeline 8 block

Component data

ID
timeline8
Access
pro
Created
Mar 16, 2025
Type
block
Libraries
Radix UI, Base UI, React Aria
Figma

Timeline 8 block design & features

Timeline8 is a centered vertical changelog timeline built with Shadcn UI. A large Timeline heading sits above a narrow column. A vertical separator runs down the left. Each date group has a double-ring marker on the line, a rounded date badge, and a borderless card of bullet items. Each item is a small filled dot plus a sentence that can include bold, italic, or underlined phrases. Sample dates fall in March 2025, with product-update copy about AI coding features.

The heading is large and tightly tracked. Date badges use a secondary, muted fill with extra rounding. The line and markers are high-contrast: a dark outer ring and a light inner dot. Cards have no border or shadow, so the bullets sit almost directly under the badge. Spacing between date groups is roomy. Items within a group sit close together. The section is static.

The look is a product changelog or release log: dated clusters of short updates rather than illustrated process steps. It is a familiar vertical timeline with a bit more editorial formatting in the bullets. Complexity is moderate and content-driven. You would need real dates and several update sentences per day, including any phrases you want emphasized.

The column stays centered and single-file on every screen size.