Skip to content
Fuji UI
Component

Stepper

Numbered, connected progress trail. Clickable when onStepClick is passed.

Clickable

  1. Account

  2. Profile

  3. Done

  • With onStepClick each step renders as a button; the current step carries aria-current="step" either way

Custom icons

Give a step an icon to replace its number; completed steps still show the check.

  1. Account

  2. Details

  3. Payment

Tones

tone recolors the completed track, active step, and connectors.

  1. One

  2. Two

  3. 3

    Three

  1. One

  2. 2

    Two

  3. 3

    Three

Back / Next with a disabled step

Drive activeStep from your own Back/Next controls. A disabled step cannot be clicked to jump to it, but it still counts in the sequence - Back and Next move through Payment here.

  1. Basket

  2. Details

  3. Shipping

  4. Payment

  5. Confirmation

Step 3 of 5

API reference

activeStep *None
number

Index (0-based) of the current step. Steps before it are complete.

steps *None
StepperStep[]

The steps, in order. Progress is derived from the active index, not stored per step.

onStepClickNone
((index: number) => void)

When provided, steps render as buttons and call back with the clicked index.

tone"default"
ComponentTone

Color used for complete/current steps and the connecting line. Default "default".

Also accepts everything from React.HTMLAttributes<HTMLOListElement>.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent