# Process steps (goodtabs UI)

Numbered steps on a hairline, stacked when narrow and in a row when wide.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/process-steps.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/process-steps`

## Usage

```tsx
import { ProcessSteps } from "@/components/process-steps"

<ProcessSteps steps={[
  { title: "Pick", description: "Choose a component." },
  { title: "Install", description: "One command." },
]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| steps | `{ title: string; description?: string }[]` |  | The steps in order. Numbers are generated from position. |

## When to use

- A how it works section with three to five steps
- A short onboarding or release sequence
- Any ordered list that should read as a path

## When not to use

- Interactive progress, which wants the stepper
- Long instructions, which want prose
- Unordered features, which want the feature grid

## Notes for agents

- Server component; renders a real ol, numbers are aria-hidden because the list already announces position
- Layout follows container width with @container, not the viewport, so it works in a card or a column
- Keep titles to a few words and descriptions to two lines so the row stays level

Docs: https://ui.goodtabs.co/components/process-steps