# Steps
Source: https://ui.spencerwueste.com/docs/components/steps
Markdown: https://ui.spencerwueste.com/llm/components/steps.md

> Vertical timeline for agent plans and multi-step runs, with status indicators and collapsible details.

> Live preview: https://ui.spencerwueste.com/docs/components/steps (demo source: `src/demos/steps-demo.tsx`)

## Installation

```bash
npx shadcn@latest add https://ui.spencerwueste.com/r/steps.json
```

Manual install dependencies: `@heroicons-animated/react motion`

Registry JSON: https://ui.spencerwueste.com/r/steps.json

## Usage

```tsx
import {
  Step,
  StepBody,
  StepDescription,
  StepDetails,
  StepHeader,
  StepIndicator,
  StepMeta,
  StepTitle,
  Steps,
} from "@/components/pandacoderz-ui/steps";
```

```tsx
<Steps>
  <Step status="completed">
    <StepIndicator />
    <StepBody>
      <StepHeader>
        <StepTitle>Read the failing test</StepTitle>
        <StepMeta>1.2s</StepMeta>
      </StepHeader>
      <StepDescription>Located the Enter handler assertion.</StepDescription>
    </StepBody>
  </Step>
  <Step status="running" isLast>
    <StepIndicator />
    <StepBody>
      <StepHeader><StepTitle>Patch the handler</StepTitle></StepHeader>
      <StepDetails label="Show diff">{/* logs, tool calls, code */}</StepDetails>
    </StepBody>
  </Step>
</Steps>
```

The `waiting` status is for human-in-the-loop gates. Render your approve and reject buttons inside `StepBody`.

## API Reference

### Step

| Prop | Type | Description |
| --- | --- | --- |
| `status` | `"pending" \| "running" \| "completed" \| "error" \| "waiting"` | Drives the indicator icon and colors. |
| `isLast` | `boolean` | Hides the connector line below this step. |

### StepIndicator

Renders the status icon. Pass children to override it (a number, an avatar).

### StepDetails

| Prop | Type | Description |
| --- | --- | --- |
| `label` | `string` | Trigger text. Default `"Details"`. |
| `defaultOpen` | `boolean` | Initial expanded state. |