/// Navigation

Steps

Stepper — an ordered list of [ 0N ]-marked steps joined by hairline connectors, with done / active / pending states. Vertical or horizontal.

import { Steps } from "@protocore/pds";

View as Markdown

Basics

Pass items (title + optional description) and the zero-based active index. Earlier steps read as done, the active step inks its title and grows an accent rule, later steps read muted.

[ 01 ]
Deploy endpoint
Publish the OApp contract on the source chain.
[ 02 ]
Wire DVNs
Select verifiers and set the confirmation threshold.
[ 03 ]
Fund executor
Prepay destination gas so messages can settle.
[ 04 ]
Send message
Emit the first cross-chain packet.

Horizontal

orientation="horizontal" lays the steps in a row — good for a compact status strip above content.

[ 01 ]
Submitted
[ 02 ]
Verified
[ 03 ]
In flight
[ 04 ]
Settled

Driven by state

Steps is a display component: it reflects whatever active you pass. Own the index in your flow's state and move it as the user advances.

[ 01 ]
Draft
Compose the migration payload.
[ 02 ]
Review
Two signers approve the change.
[ 03 ]
Queue
Timelock holds for 48 hours.
[ 04 ]
Execute
Change lands on-chain.

When to use it

Use Steps to show progress through an *ordered* process where sequence matters — an onboarding wizard, a deploy pipeline, a multi-sig approval flow.

Showing a continuous ratio (73% uploaded)? Use ProgressBar, not discrete steps.
A dated history of things that already happened? Use Timeline.
Independent, unordered sections the user opens at will? Use Accordion.
Steps renders state only — keep the actual current-step logic in your app and pass active.

Usage

Keep step titles to a short verb phrase; put detail in the description line.
Drive active from the single source of truth for where the flow is.
Use horizontal orientation for 3–5 short steps, vertical when descriptions are long.
Order steps in the real sequence the user experiences.

Don't

Don't use Steps for a continuous percentage — reach for ProgressBar.
Don't let the user jump to a later step the flow hasn't unlocked without validating.
Don't cram ten steps into a horizontal row on mobile.
Don't rely on the marker color alone — each step also carries state text and position.

Accessibility

Steps renders an ordered list (`<ol>`); each `<li>` carries `data-state` (done / active / pending) and the active step is marked `aria-current="step"`.
The `[ 0N ]` markers convey position textually, so progress is not signalled by color alone.
Steps is non-interactive display; if a step must be clickable, wrap its content in your own button and manage focus there.

`Steps` props

Prop	Type	Default	Description
`active`	`number`	`0`	Zero-based index of the current step. Earlier steps read as done, later as pending.
`className`	`string`	—
`items` *	`StepItem[]`	—	The ordered steps.
`orientation`	`enum`	`vertical`	Layout axis. Default "vertical".
`style`	`CSSProperties`	—