Deploy pipelinePro

Commits running down build, test, preview and production: each stage fills its bar and says how far it is, the build turns a commit into an artifact, failing tests stop about one deploy in six in red, production shows the version going up, and a strip of green and red bars keeps the history. Pauses, and stacks on phones.

When to use

Commits running through build, test, preview and production, failures stopping where they broke.
CI/CD and hosting products; a live deploy status from your own pipeline.

When not to use

Products without builds or releases.
Finding why a build failed: its log, not the diagram.

Usage

Deploy pipeline with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { useEffect, useRef } from "react"
2import { DeployPipeline, type PipelineHandle } from "@/components/dashral/blocks/deploy-pipeline"
3
4const deploys = useRef<PipelineHandle>(null)
5useEffect(() => ci.on("push", (c) => deploys.current?.send({ message: c.message, failed: c.failedStage })), [])
6
7<DeployPipeline ref={deploys} mode="live" stages={stages} />

API reference

DeployPipeline

The section: a heading, the pipeline in a dotted panel with a Live badge and Pause, the latest deploys under it, and a row of figures. Every part comes from props, with a sample pipeline by default.

Prop	Type	Default
`eyebrow`	`React.ReactNode`	`"Deploys"`
`title`	`React.ReactNode`	`sample`
`description`	`React.ReactNode`	`sample`
`stages`	`Stage[]` The stages after the commit, in order; the one at `check` stops deploys whose tests fail.	`sample`
`check`	`number`	`2`
`commit`	`PipelineProps["commit"]` Where commits come from: the first card.	`sample`
`version`	`PipelineProps["version"]` The version on the last stage.	`sample`
`history`	`Deploy[]` The history's first deploys, oldest first, before any finishes.	`sample`
`stats`	`{ value: string; label: string }[]` The figures under the diagram; none hides the row.	`sample`
`mode`	`PipelineProps["mode"]` With your own pushes instead of sample deploys (see Pipeline's mode="live"); finished ones join the history.	—
`ref`	`React.Ref<PipelineHandle>`	—

Pipeline

Deploys running down a pipeline, one commit after another: the commit leaves as a hollow dot, each stage works on it in turn (its bar fills, it says how far it is), the build turns it into a solid square, and the stage at check stops about one deploy in six (red, and it goes no further). Production shows the version, up one with every release. In a row when there's room, stacked on a narrow container. One requestAnimationFrame loop writes the SVG and the cards directly; React only hears about finished deploys. Sample deploys by default; with mode="live", only the ones you send (see PipelineHandle). It stops off screen, in a hidden tab, when paused and (live) with nothing running; with reduced motion it holds still.

Prop	Type	Default
`stages`	`Stage[]` Required. The stages after the commit, in order. The one at `check` can stop a deploy.	—
`check`	`number` Required.	—
`commit`	`{ label: string; mark: React.ReactNode; color: string; detail: string; metric: Metric }` Required. The first card: where commits come from. Its count goes up with every deploy.	—
`version`	`{ prefix: string; patch: number }` Required. The version shown on the last stage: `major.minor.` then a patch that goes up with every release.	—
`speed`	`number` How fast deploys run: 1 is the usual pace, 2 twice as fast, 0 holds them still.	`1`
`paused`	`boolean` Brings it to rest where it is (easing down, not stopping in one frame).	`false`
`onFinish`	`(deploy: Deploy) => void` Called as each deploy finishes, in the order they were pushed.	—
`mode`	`"demo" \| "live"` "demo" plays sample deploys on its own; "live" runs one only when you send it (see PipelineHandle).	`"demo"`
`ref`	`React.Ref<PipelineHandle>`	—
`className`	`string`	—

type Stage

Prop	Type	Default
`id`	`string`	—
`label`	`string`	—
`working`	`string` What it says while it works, e.g. "Building": a percentage follows.	—
`work`	`number` How long it works on each deploy, in ms at speed 1.	—
`detail`	`string`	—
`icon`	`LucideIcon`	—
`metric`	`Metric` A count on the card, then `unit`. `value` is your own number, shown as it is. Without it the card counts deploys itself: `base` plus every deploy that has passed this stage.	—

type Deploy

One finished deploy, for the history: shipped, or stopped at the tests.

Prop	Type	Default
`id`	`number`	—
`ok`	`boolean`	—
`message`	`string`	—

type PipelineHandle

Runs deploys down a live pipeline (mode="live").

Prop	Type	Default
`send`	`(deploy: { message: string; failed?: boolean; id?: number }) => void` Runs one deploy: its commit leaves with `message`, each stage works on it for its own `work` time, and with `failed` the stage at `check` stops it. `onFinish` hears it when it's done. Off screen, in a hidden tab or with reduced motion it isn't drawn, but it's counted and finished at once.	—