# ProgressSteps

> A horizontal track of steps with detail and meta lines, or a compact dot track for table cells.

Category: Data display. Docs page: https://rime.mjsons.net/components/progress-steps

## Installation

```bash
npx shadcn@latest add KezLahd/rime/progress-steps
```

ProgressSteps shows where something is in a fixed sequence (a shipment: packed, shipped, delivered). compact fits a table cell.

## Usage

```tsx
import { ProgressSteps } from "@/components/ui";

<ProgressSteps aria-label="Shipment" steps={[{ label: "Packed", state: "done" }, { label: "Shipped", state: "current" }]} />
```

## Props: ProgressSteps

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `steps` (required) | `ReadonlyArray<ProgressStep>` |  |  |
| `aria-label` | `string` |  |  |
| `compact` | `boolean` |  | compact = segments plus a one-line caption, for customer cards. |
| `caption` | `ReactNode` |  | Compact caption, e.g. "Delivery 2 of 3 dispatched". Required in compact mode for meaning. |
| `className` | `string` |  |  |

## Examples

### Full and compact

```tsx
<ProgressSteps steps={steps} aria-label="Shipment" />
<ProgressSteps compact steps={steps} aria-label="Shipment" />
```

## Theme tokens

Per-component tokens. Undeclared by default: the default below is the fallback the CSS uses. Set any of them at :root or on a wrapper to restyle every instance.

| Token | Default |
| --- | --- |
| `--r-flat` | `3px` |

System tokens it reads: `--brand-gradient`, `--danger-base`, `--danger-ink`, `--ink-brand`, `--ink-muted`, `--ink-secondary`, `--rgb-brand`, `--rgb-brand-deep`, `--rgb-contact`, `--rgb-danger`, `--text-caption`, `--text-micro`.

## Accessibility

- An ordered list; each step's state is in its accessible text, not colour alone.

## Do

- Keep labels to one or two words.

## Don't

- Don't make it interactive; that is Stepper.