components / stepper

stepper.

numbered progress rail for a multi-step flow. unlike tabs — peers you can visit in any order — a stepper asserts sequence: it renders as an ordered list, marks the active step with aria-current, and only makes already-completed steps clickable.

  1. pick a timeshown in your zone
  2. your detailsname and email
  3. doneinvite sent
installation
bunx @justin06lee/chrome@latest add stepper
props
nametypedefaultdescription
steps *Step[]-{ label, description? }.
current *number-zero-based index of the step in progress.
orientation'horizontal' | 'vertical''horizontal'
onStepClick(index: number) => void-makes completed steps clickable so an earlier answer can be changed. steps ahead of current stay inert.
compactbooleanfalsedrop labels and descriptions for a bare progress rail.
ariaLabelstring'progress'
classNamestring-