A vertical plan or trace with pending, active, done and failed steps joined by a connector line that fills as steps complete.
Read deploy config (Done)
relay.toml, 3 services
Run staging checks (In progress)
Health probes 2 of 3
Promote to production (Pending)
npx shadcn@latest add https://hyperblur.dev/r/agent-steps.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/agent-steps.tsx.
import { AgentSteps } from "@/components/hyperblur/agent-steps"
<AgentSteps activeIndex={1} steps={[{ id: "a", title: "Read config" }, { id: "b", title: "Run checks" }, { id: "c", title: "Ship" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| steps | { id: string; title: string; detail?: string; status?: "pending" | "active" | "done" | "failed" }[] | [] | Steps in order. A step status overrides activeIndex. |
| activeIndex | number | Steps before it are done, it is active, the rest are pending. | |
| color | string | "#2f7bff" | Accent for the spinner, check and connector fill. |
| compact | boolean | false | Tighter spacing and smaller text. |