MiniDev UI

Build Pipeline

CI pipeline view that shows each stage as a chip with success, running, failed or pending icons, joined by connectors. Status text is exposed to screen readers.

src/registry/ui/build-pipeline.tsx/r/build-pipeline.json
  1. Installsuccess
  2. Typechecksuccess
  3. Auditrunning
  4. Deploypending

Stages

Installation#

bash
npx shadcn@latest add @minidev/build-pipeline

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/build-pipeline.json

Usage#

tsx
import { BuildPipeline } from "@/components/ui/build-pipeline"

export function Example() {
  return (
    <BuildPipeline />
  )
}

API reference#

BuildPipeline props
PropTypeDefault
stagesStage[][ { name: "Install", status: "success...
classNamestring-

Dependencies#

npm

lucide-react

Built from

No other MiniDev files

Related dev tools components#

Api Key ListReact settings panel listing API keys with masked previews, created date badges and a rotate button per key, plus a header action to create a new key.Check Run ListList of CI check runs with success, failed or running icons, monospaced job names and a status label. Looks like the checks section of a pull request.Code BlockReact code block with zero dependency syntax coloring, a language tag, optional filename and line numbers, and a copy button that confirms Copied.Code Editor FrameEditor style frame with a monospaced filename tab and a code area. Wrap snippets, editors or diffs so they read as a file in your React docs or app.Commit RowGit commit row for React with author avatar, commit message, relative time, a short SHA badge and a copy button for the hash. Fits deploy logs.Console OutputScrollable Tailwind console panel in monospace that prints log, warn and error lines with level labels. Uses a log role and is keyboard focusable.
All Developer tool UI components for React