Stepper

Horizontal and vertical progress steps with number, icon or dot markers and complete / current / upcoming states joined by connector lines.

$bunx shadcn@latest add @nx-ui/stepper
Registry item
Installs withutils

Horizontal, interactive

Onboarding an organisation. Use the buttons to advance through the steps.

  1. Organisation

    Legal entity & address

  2. 2

    Sites

    Register land parcels

  3. 3

    Verification

    Upload evidence

  4. 4

    Live

    Start logging movements

Icon markers

  1. Your details

    Name & role

  2. Manifest

    Waste codes

  3. Review

    Check & confirm

  4. Submit

    Send to registry

Dot markers

  1. Organisation

    Legal entity & address

  2. Sites

    Register land parcels

  3. Verification

    Upload evidence

  4. Live

    Start logging movements

Vertical

  1. Organisation

    Legal entity & address

  2. 2

    Sites

    Register land parcels

  3. 3

    Verification

    Upload evidence

  4. 4

    Live

    Start logging movements

Vertical with icons

  1. Your details

    Name & role

  2. Manifest

    Waste codes

  3. Review

    Check & confirm

  4. Submit

    Send to registry

API reference

Exported parts and their props, extracted from the component source.

PropTypeDefaultDescription
steps*Step[]——
activeStepnumber0Zero-based index of the current step.
orientation"horizontal" | "vertical""horizontal"—
marker"number" | "icon" | "dot""number"—

…extends React.ComponentProps<"ol">