Step capsules

Pro

The steps of a plan or a run as a wrapping row of small cards, one per step, where StepList's column is too tall: a header strip, a narrow panel, a summary. It takes StepList's steps and draws the same marks and status words: a tick or cross drawn when a step settles while on screen, a spinner only while it runs, its status read with its title. A step added after the capsules first drew rises in; the steps they loaded with are still. Titles from the agent are drawn as text, in their own direction (bdi).

Markdown

Version 5.2.0· other versions

This page is for 5.2.0, the current release. An earlier release’s page is the Markdown that release published, so the docs match the version you have installed (candor-lock.json records it).

Not in the docs of 1.3.0, 1.4.0, 1.5.0, 1.5.1, 1.6.0, 1.7.0, 1.8.0, 1.8.1, 1.9.0, 1.9.1, 2.0.0, 2.1.0, 2.2.0, 2.3.0, 2.4.0, 2.5.0, 2.5.1, 2.6.0, 2.6.1, 2.6.2, 2.7.0, 2.8.0, 2.9.0, 2.10.0, 3.0.0, 4.0.0, 4.0.1, 4.0.2, 4.1.0, 4.2.0 and 4.3.0: the page came later, or had another name then.

Docs pages weren’t kept for 1.0.0, 1.0.1, 1.1.0, 1.1.1, 1.2.0 and 1.2.1: they are kept from 1.3.0 on, and before that only llms.txt was published.

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-capsules

Brings in: bidi, motion, status, step-list, tokens, utils

Usage

TSX · The example above

"use client"

import { StepCapsules } from "@/components/candor/step-capsules"
import type { Step } from "@/components/candor/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" },
  { id: "3", title: "Ask a person to approve", status: "waiting" },
  { id: "4", title: "Issue the refund", status: "idle" },
]

// StepList's steps as a wrapping row: the same marks and status words, for a header strip or a narrow panel.
export default function Example() {
  return <StepCapsules steps={steps} className="max-w-xl" />
}

<StepCapsules>

Prop	Type	Default	Description
stepsrequired	`Step[]`	—	The steps in order, each with a status, and optional detail and meta: `StepList`'s.
className	`string \| undefined`	—	Classes for the list, merged with Candor's.

Motion

Moment	Family	What it does
arrive	arrive, rise	A step's card rises in when the app adds it after the capsules first drew. The steps they were drawn with appear still. Each card's mark is StepList's: a tick or cross drawn when the step settles on screen (step-list:mark), and a spinner that turns only while the step runs (step-list:working).

Set with --cd-motion-step-capsules-<moment>-* in your brand file; the families are in the design reference.