Pipeline Diagram
A step-by-step pipeline visualization with numbered nodes and animated connectors.
Preview
Import
import { PipelineDiagram } from "@sigil-ui/components";Usage
<PipelineDiagram steps={[{ label: "Receive", description: "Validate the request" }, { label: "Process", description: "Run the workflow" }, { label: "Store", description: "Persist the result" }, { label: "Notify", description: "Send confirmation" }]} />Vertical direction
<PipelineDiagram
direction="vertical"
steps={[
{ label: "Source", description: "Pull from API" },
{ label: "Validate", description: "Schema check" },
{ label: "Store", description: "Write to DB" },
]}
/>With icons
<PipelineDiagram
steps={[
{ icon: <UploadIcon />, label: "Upload" },
{ icon: <CpuIcon />, label: "Process" },
{ icon: <CheckIcon />, label: "Done" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
steps | PipelineStep[] | — | Array of { icon?, label, description? } (required) |
direction | "horizontal" | "vertical" | "horizontal" | Layout direction |
connector | "solid" | "dashed" | "dashed-animated" | "dashed-animated" | Connector line style |
showNumbers | boolean | true | Show step numbers |
className | string | — | Additional CSS classes |
Plus all standard <div> HTML attributes.