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 |
TRSteps is intentionally presentational. It does not manage progress or selection, so authored headings, paragraphs, links, code blocks, and other components remain untouched inside each item.
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 for authored procedures, not interactive progress indicators. If the user must move between states or complete a form, compose a dedicated progress or navigation component instead.
State boundaries
Steps has no current, completed, or disabled state props and applies no state styling. Put status in the item content so it is available to every reader. You may set aria-current to "step" on an Item when another control manages a wider workflow, but a Steps item itself is not interactive or disableable.
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 |
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.