Step list

Free · MIT

An ordered list of steps joined by a rail: an agent's plan, its reasoning, a run's stages. The rail fills to each step as it finishes, never ahead of it, and a step that finishes while on screen draws its mark.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/step-list

Brings in: status, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import { StepList, type Step } from "@/components/step-list"

const steps: Step[] = [
  { id: "1", title: "Read the order history", status: "succeeded", meta: "3s" },
  { id: "2", title: "Draft the refund", status: "succeeded", meta: "5s", detail: "$42.00 to the original card" },
  { id: "3", title: "Ask a person to approve", status: "waiting" },
  { id: "4", title: "Issue the refund", status: "idle" },
]

export default function Example() {
  return <StepList steps={steps} className="max-w-md" />
}

<StepList>

Prop	Type	Default	Description
stepsrequired	`Step[]`	—	The steps in order, each with a status, and optional detail and meta.
className	`string \| undefined`	—	Extra classes for the outer element.

<StepMark>

A step's status as a mark. When the status reaches done or failed while the mark is on screen, the spinner becomes a tick or cross drawn along its path; a mark that mounts already finished is drawn still.

Prop	Type	Default	Description
statusrequired	`RunStatus`	—	The step's status, which picks its mark.

Types

Step: { id: string title: React.ReactNode status: RunStatus detail?: React.ReactNode | undefined meta?: React.ReactNode | undefined }