docs / patterns / step-list

StepList

a vertical numbered process: a connector spine with a title and body per step. for how-it-works and onboarding sections.

intensity · structuresrsc · server

provenance

shaped from personal-website

layer

core / patterns

intensity

structures · organizes a region, stays out of the content

composition

a how-it-works section, alone or beside an illustrationwrap in RevealGroup for a staggered entrancenot a wizard. it explains a process, it does not run oneno long prose bodies. a step body is a sentence or two

a11y

an ordered list with a real heading per step · the connector spine is aria-hiddenjest-axe
live demo · try it out
  1. 01

    Sketch the flow

    Rough the screens and the path between them.

  2. 02

    Build the primitives

    Wire the tokens and the core components.

  3. 03

    Ship it

    Push to the registry and migrate the apps.

customize
stepshow many in the sequence
3
bodiesa sentence under each title
iconsreplace the step number with an icon
headingLevellevel of each step title
usagecopy
import { StepList } from "@usva-ui/react/patterns/step-list";

<StepList
  headingLevel="h3"
  steps={[
    { title: "Sketch the flow", body: "Rough the screens and the path between them." },
    { title: "Build the primitives", body: "Wire the tokens and the core components." },
    { title: "Ship it", body: "Push to the registry and migrate the apps." },
  ]}
/>

props

proptypedefaultnotes
stepsStep[]—the steps: { title, body?, icon?, id? }. an icon replaces the number in the chip and moves the ordinal above the title.
headingLevel"h2" | "h3" | "h4""h4"level of each step title. pick it to fit the page outline.

get it

bun add @usva-ui/reactcopy
usagecopy
import { StepList } from "@usva-ui/react/patterns/step-list";

<StepList
  steps={[
    { title: "Sketch", body: "Rough the flow." },
    { title: "Build", body: "Wire it up." },
    { title: "Ship", body: "Push it live." },
  ]}
/>