Steps
Numbered semantic procedures for authored documentation.
Contract
| Part | Renders | Best for |
|---|---|---|
Root | semantic ordered list | the complete procedure |
Item | semantic list item with a numbered marker | one task, including rich content |
Progress | accessible segmented progressbar | the current position in a finite workflow |
Root and Item remain presentational. Progress accepts one-based current and total values, clamps invalid ranges, and exposes the result through progressbar semantics.
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/steps.css';Scroll inside the code area to read long lines.
Imports
import { TRSteps } from '@tinyrack/ui/components/steps';Scroll inside the code area to read long lines.
Usage
Installation procedure permalink
Use one item per task. The marker and connecting line are supplied by TRSteps while the content stays ordinary React markup.
Examples
A complete setup guide permalink
Guides can combine headings, prose, and code inside the same numbered list.
Use TRSteps.Progress to report progress beside a workflow's own controls. It displays state but does not navigate or submit the workflow.
State boundaries
Root and Item have no current, completed, or disabled state. Put authored status in item content, and set aria-current to "step" when another control owns the workflow. Progress owns only its numeric current state and requires an accessible label that includes the workflow context.
The layout wraps long content on narrow screens and accepts ordinary block children. No Playground is shown because Steps has no meaningful visual scalar prop to control.
API
| Export | Element | Props |
|---|---|---|
TRSteps.Root, TRStepsRoot | ol | TRStepsRootProps, including native ordered-list props and a React 19 ref |
TRSteps.Item, TRStepsItem | li | TRStepsItemProps, including native list-item props and a React 19 ref |
TRSteps.Progress, TRStepsProgress | div[role="progressbar"] | TRStepsProgressProps, including current, total, an accessible label, native div props, and a React 19 ref |
Style tokens
Override --tr-steps-gap, --tr-steps-margin-block, --tr-steps-item-border, --tr-steps-item-border-width, --tr-steps-item-padding-inline-start, --tr-steps-marker-background, --tr-steps-marker-color, --tr-steps-marker-font-size, --tr-steps-marker-font-weight, --tr-steps-marker-radius, or --tr-steps-marker-size on the root. Every token falls back to a semantic Tinyrack token.