Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Timeline blocks

Pro

Customer Journey Timeline Block for Radix UI

Six stages from Visit to Renew on a rail that gets narrower with the share of people still in the journey, with the conversion and drop between stages in words, and a segment switch for All, Self-serve and Sales-led.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

See where people leave with this customer-journey timeline for React with Radix UI. It is written for Pathwise, a fictional product-analytics tool. A hairline frame with a plus mark on each corner holds three figures (people who reach renewal, visit-to-renewal conversion and the largest drop), a segment switch and six stages on a rail: Visit, Sign-up, Activate, First project, Subscribe and Renew. The rail beside each stage is as wide as its share of the visitors, from 16 pixels down to 3, and between two stages a line says how many continue and how many drop off, with a number and a sign ("62% continue to Sign-up, 38% drop off (−38%)"). The "All / Self-serve / Sales-led" switch swaps in that segment's counts and recomputes every figure. It is built from SegmentGroup and Guides with CSS for the rail. For funnels, onboarding reviews and growth dashboards. The counts are example data.

FAQ

How do I change the counts?

Edit STAGES and SEGMENTS at the top of the file. A segment has an id, a name and counts, the people still in each stage in stage order. Every percentage, the rail widths and the largest drop are derived from them.

How is the rail width worked out?

railOf() gives 3 pixels plus up to 13 more in proportion to the stage's count over the visitors at the first stage, so the first stage is 16 pixels wide and the rest narrow with the people who remain. It is set through a CSS variable on each row.

How is the largest drop found?

dropStage() compares the continue rate of every step (the share of the previous stage that reaches the next) and picks the lowest, then names it as "Sign-up to Activate". Switching segment recomputes it.

What stays in the page?

Only the chosen segment. Nothing is saved or sent. To make it real, query your event store for a count per stage and segment and fill SEGMENTS from the result.

Is it accessible?

The rail is decoration. Each stage writes its people and share in text, each connector writes the conversion and the drop in words and a sign, and the foot is a polite status line that says how many reach renewal in the chosen segment. The switch is a labelled group.

How does it look on a phone?

The rows are the same, narrower: the stage name and its count share the first line when they fit and wrap otherwise, and the switch fills the width.

All 100 timeline blocks