184 Components
Pipeline DAG Viewer
CardsGitHub Actions and GitLab CI inspired Directed Acyclic Graph (DAG) build pipeline visualizer with sequential and parallel stage columns, live status animations, and embedded console output inspector.
ci-cd-matrix.yml
Triggered by commit main • 4b2e8c1
BUILD IN PROGRESS
Stage 1
Stage 2
Stage 3
Stage 4
Build Docker Image — Step Output
running (54s)Step 4/12 : RUN npm run build
Generating static pages (361/361) ...
Exporting multi-stage container layer ...
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/pipeline-dag-viewer.json"
Props
TypeScript props supported by <PipelineDAGViewer />.
| Prop | Type | Default | Description |
|---|---|---|---|
| pipelineName | string | "ci-cd-matrix.yml" | Workflow definition file or pipeline title. |
| commitSha | string | "main • 4b2e8c1" | Git branch and commit reference that triggered the run. |
Key Features
- Multi-stage columns supporting parallel job execution (e.g., Unit & E2E tests).
- Visual status indicators for success, running, failed, and queued stages.
- Interactive stage node selection revealing terminal build console output.
- Commit SHA and workflow run telemetry header.
Keyboard & Accessibility
- Keyboard accessible interactive stage buttons.
- High contrast status badges with clear semantic icons.