A horizontal track of steps with detail and meta lines, or a compact dot track for table cells.
ProgressSteps shows where something is in a fixed sequence (a shipment: packed, shipped, delivered). compact fits a table cell.
Installation
npx shadcn@latest add KezLahd/rime/progress-stepsAlso installs: base.
Usage
import { ProgressSteps } from "@/components/ui";
<ProgressSteps aria-label="Shipment" steps={[{ label: "Packed", state: "done" }, { label: "Shipped", state: "current" }]} />Examples
Full and compact
- Packed, done2 boxes
- Shipped, in progressExpress
- Delivered, not yetSignature
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
ProgressSteps
| Prop | Type | Default | Description |
|---|---|---|---|
| stepsRequired | 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 |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --r-flat | 3px | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --brand-gradient | tokens.css | … |
| --danger-base | tokens.css | … |
| --danger-ink | tokens.css | … |
| --ink-brand | tokens.css | … |
| --ink-muted | tokens.css | … |
| --ink-secondary | tokens.css | … |
| --rgb-brand | tokens.css | … |
| --rgb-brand-deep | tokens.css | … |
| --rgb-contact | tokens.css | … |
| --rgb-danger | tokens.css | … |
| --text-caption | tokens.css | … |
| --text-micro | tokens.css | … |
Accessibility
- An ordered list; each step's state is in its accessible text, not colour alone.
Do and don't
Do
- Keep labels to one or two words.
Don't
- Don't make it interactive; that is Stepper.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open progress-steps.md