Pipeline Diagram
Show the stages in a processing pipeline.
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" }]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
steps (required) | PipelineStep[] | — | Steps configuration. |
direction | "horizontal" | "vertical" | — | Direction configuration. |
connector | "solid" | "dashed" | "dashed-animated" | — | Connector configuration. |
showNumbers | boolean | — | Show Numbers configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-radius-full | Radius full |
--s-primary | Primary |
--s-primary-muted | Primary muted |
--s-primary-contrast | Primary contrast |
--s-text | Text |
--s-text-muted | Text muted |