Component gallery

Stepper

A pipeline's stages in one strip: status circles, completion connectors, an optional click per stage with a polite blocked refusal.

Read-only strip

No onStep, no buttons: the list-row shape. The active stage pings (unless reduced motion); a blocked stage pauses instead.
  1. Scrape418 rows
  2. 2Schema mapping
  3. Reviewparked in review
  4. 4Export

Stage 2 of 4

Clickable pipeline

onStep makes each stage a button; activeKey underlines the surface the reader is on and carries aria-current. The blocked stage refuses politely: its reason is the title.

Stage 2 of 4

Reader is on: map

Small, for a table row

size="sm" fits an expanded jobs row; same contract, tighter circles.
  1. Scrape
  2. Enrich
  3. 3Map
  4. 4Export

Eight stages in a narrow container

The strip never overflows its row: labels clamp, and past the floor width it scrolls with a faded edge. The footer reads Stage N of M.
  1. Taxonomy
  2. Scrape
  3. Enrich attributes
  4. Schema mapping
  5. 5Review queue
  6. 6Export
  7. 7Validate
  8. 8Submit

Stage 5 of 8

@versable-git/ui · all states, both themes