Stepper

Multi-step progress indicators.

On This Page

Quick ActionsProject StudioNew Nexore Make (AI)Source on GitHub

Stepper

Multi-step progress indicators.

Stepper

Wizard layout displaying progress in multi-step workflows with smooth transitions, continuous vertical alignment, and direct step clicking.

When to use

horizontal defaultGuided multi-step tasks where space is ample and step labels are necessary

circles variantCompact layouts with numbered circle indicators, ideal for mobile or dense grids

arrows variantStrict linear progress sequences like checkout flows and delivery tracking systems

vertical orientationForm wizards on sidepanels or checkout drawers with multi-line step descriptions

Interactive Playground

Live CanvasInteractive

AccountCreate username & pass

PaymentLink credit card details

ReviewFinal validation checking

Controls(4)

currentStep

number

Current active step index (0-indexed)

orientation

select

Stepper layout flow orientation

variant

select

Visual indicator style variant

size

select

Indicator sizing dimensions

Generated JSX

Source

import { Stepper } from "nexoreui";

const steps = [
  { title: "Account", description: "Create credentials" },
  { title: "Payment", description: "Link payment card" },
  { title: "Review", description: "Final confirmation" },
];

export default function StepperDemo() {
  return (
    <Stepper
      currentStep={1}
      steps={steps}
    />
  );
}

1. Interactive Step Wizard (Clickable)

AccountCreate username & pass

PaymentLink credit card details

ReviewFinal validation checking

Step 2: Enter payment methods & billing address.

Step 2 of 3

component.tsx

2. Numbered Circles Style

AccountCreate username & pass

PaymentLink credit card details

ReviewFinal validation checking

Step 2: Enter payment methods & billing address.

Step 2 of 3

component.tsx

3. Chevron Arrows with Icons

CheckoutAdd cart items

SecurityOTP verification

ShippingDelivery details

DoneOrder confirmation

Step 2: Enter payment methods & billing address.

Step 2 of 4

component.tsx

4. Vertical Layout with Continuous Connector Line

AccountCreate username & pass

PaymentLink credit card details

ReviewFinal validation checking

Step 2: Enter payment methods & billing address.

Step 2 of 3

component.tsx

5. Initial Incomplete State

AccountCreate username & pass

PaymentLink credit card details

ReviewFinal validation checking

component.tsx

API Reference (Props)

Prop	Type	Default	Description
steps*	StepItem[]	`—`	Array of step item structures containing title, description, and icon.
currentStep*	number	`—`	Active step index (0-indexed).
orientation	"horizontal" \| "vertical"	`"horizontal"`	Controls whether steps flow horizontal or down vertical.
variant	"default" \| "circles" \| "arrows"	`"default"`	The preset layout visual style variant.
size	"sm" \| "md" \| "lg"	`"md"`	Sizing scale dimensions of indicators and icons.
onStepClick	(stepIndex: number) => void	`—`	Enables direct step click navigation.
className	string	`—`	Additional custom class names.

Accessibility (a11y)

Keyboard Focus: Step indicators are interactive buttons supporting keyboard focus and activation with Enter or Space.
Progress Tracking: Screen readers announce the active step via aria-valuenow and step index.

PreviousTable

NextScroll Area

On This Page

Quick ActionsProject StudioNew Nexore Make (AI)Source on GitHub

Stepper

Wizard layout displaying progress in multi-step workflows with smooth transitions, continuous vertical alignment, and direct step clicking.

When to use

horizontal defaultGuided multi-step tasks where space is ample and step labels are necessary

circles variantCompact layouts with numbered circle indicators, ideal for mobile or dense grids

arrows variantStrict linear progress sequences like checkout flows and delivery tracking systems

vertical orientationForm wizards on sidepanels or checkout drawers with multi-line step descriptions

Interactive Playground

Live CanvasInteractive

AccountCreate username & pass

PaymentLink credit card details

ReviewFinal validation checking

Controls(4)

currentStep

number

Current active step index (0-indexed)

orientation

select

Stepper layout flow orientation

variant

select

Visual indicator style variant

size

select

Indicator sizing dimensions

Generated JSX

Source

import { Stepper } from "nexoreui";

const steps = [
  { title: "Account", description: "Create credentials" },
  { title: "Payment", description: "Link payment card" },
  { title: "Review", description: "Final confirmation" },
];

export default function StepperDemo() {
  return (
    <Stepper
      currentStep={1}
      steps={steps}
    />
  );
}

1. Interactive Step Wizard (Clickable)

AccountCreate username & pass

PaymentLink credit card details

ReviewFinal validation checking

Step 2: Enter payment methods & billing address.

Step 2 of 3

component.tsx

2. Numbered Circles Style

AccountCreate username & pass

PaymentLink credit card details

ReviewFinal validation checking

Step 2: Enter payment methods & billing address.

Step 2 of 3

component.tsx

3. Chevron Arrows with Icons

CheckoutAdd cart items

SecurityOTP verification

ShippingDelivery details

DoneOrder confirmation

Step 2: Enter payment methods & billing address.

Step 2 of 4

component.tsx

4. Vertical Layout with Continuous Connector Line

AccountCreate username & pass

PaymentLink credit card details

ReviewFinal validation checking

Step 2: Enter payment methods & billing address.

Step 2 of 3

component.tsx

5. Initial Incomplete State

AccountCreate username & pass

PaymentLink credit card details

ReviewFinal validation checking

component.tsx

API Reference (Props)

Prop	Type	Default	Description
steps*	StepItem[]	`—`	Array of step item structures containing title, description, and icon.
currentStep*	number	`—`	Active step index (0-indexed).
orientation	"horizontal" \| "vertical"	`"horizontal"`	Controls whether steps flow horizontal or down vertical.
variant	"default" \| "circles" \| "arrows"	`"default"`	The preset layout visual style variant.
size	"sm" \| "md" \| "lg"	`"md"`	Sizing scale dimensions of indicators and icons.
onStepClick	(stepIndex: number) => void	`—`	Enables direct step click navigation.
className	string	`—`	Additional custom class names.

Accessibility (a11y)

Keyboard Focus: Step indicators are interactive buttons supporting keyboard focus and activation with Enter or Space.
Progress Tracking: Screen readers announce the active step via aria-valuenow and step index.