Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Timeline blocks

Pro

Deployment Pipeline Timeline Block for Solid

One deploy as a rail of six stages (queue, build, a timed-out test, its retry, stage, release) with a toggle between equal spacing and spacing in proportion to time, each stage's share of the run, and the total and queue time.

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 a deploy spent its time with this deployment pipeline timeline for Solid with Ark UI. It is written for Shiplane, a fictional deploy service, and one release. A hairline frame with a plus mark on each corner holds a Toggle Group with two choices, "Equal spacing" and "Proportional to time", over a vertical rail of six stages: Queue, Build, a first attempt at Test that timed out, the retry (drawn as a dashed node), Stage and Release. Each stage has its start and end to the second, its length and a bar with its share of the run, rounded so the shares add to 100. With equal spacing every stage gets the same room; in proportion each gets room in step with the time it took, within a minimum and a maximum, so the long test run is plain to see. Both layouts are held unseen behind the live one, so the panel keeps its height. A polite status line at the foot says which spacing is on and how long the run took, "Ran 14 min 20 s, 3 min waiting in the queue". It is built from Toggle Group, Guides and lucide icons, with a CSS entrance only. For deploy pages, release dashboards and run histories. The run is example data.

FAQ

How do I change the stages?

Edit STAGES at the top of the file. Each stage has an id, a title, a result (ok, failed or retry) and an ISO start and end to the second. The length, the share, the total and the queue time are derived; the queue time is the length of the first stage.

Why do the shares always add to 100?

sharesOf rounds each share down and then gives the spare points to the stages with the largest remainders, so the whole-number shares never add to 99 or 101.

How does the proportional spacing work?

Each row sets a minimum height of 0.03 rem for every second it took, clamped between 3.75 rem and 10 rem, through a CSS variable, so the shortest stages stay readable and the longest does not run off the page. Under reduced motion the change between the two layouts is instant.

What stays in the page, and how do I use a real run?

Only the spacing, which is local state. Nothing is fetched or re-run. To use a real run, map your deploy service's stage events to the same fields; a stage that was retried is a second entry with the result retry.

How does it look on a phone?

The toggle drops under the heading and the rail stays at the start with the times under each stage name. The foot reserves two lines so it does not move.

All 100 timeline blocks