Timeline 1 - Centered three-step process timeline

Pro

A centered three-step process timeline with circular outlined icons, headings, monospace supporting copy, and dashed vertical connectors between each step.

Shadcn Timeline 1 block

Component data

ID
timeline1
Access
pro
Created
Nov 15, 2024
Type
block
Libraries
Radix UI, Base UI, React Aria

Timeline 1 block design & features

Timeline1 is a centered single-column process timeline built with shadcn/ui. Three steps stack in a narrow column, each with a large circular outline holding an icon, a medium heading, and a short supporting paragraph. Dashed vertical connectors sit between the nodes. The sample steps are Data Integration, Custom Configuration, and Scale Your Business, using document, layout, and outbound-arrow icons.

The treatment is light on a plain background with dark text and heavy circular outlines. Body copy sits in a monospace face and muted gray. Vertical spacing is generous, with tall dashed connectors that keep the three nodes far apart. Icons float in large empty circles rather than filled badges. The section is static, with no hover or scroll motion.

This is a simple, diagram-like process block close to a placeholder or shadcn-default style. The circular nodes and dashed connectors are the only decorative devices, and those connectors are drawn in CSS rather than as images. Complexity is low and mixed: three titles, three short paragraphs, and three icons, plus the dashed lines. It reads as a product how-it-works sequence rather than a dated changelog.

The layout stays centered in a narrow column on every screen size.