Stepper

Multi-step progress indicator for workflows.

import { Stepper } from "@ninna-ui/navigation"

pnpm add @ninna-ui/navigation

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Stepper component in your application.

import { Stepper } from "@ninna-ui/navigation";

export default function Example() {
  return (
    <Stepper activeStep={1}>
      <Stepper.Step label="Account" description="Create account" />
      <Stepper.Step label="Profile" description="Set up profile" />
      <Stepper.Step label="Review" description="Review & submit" />
    </Stepper>
  );
}

Basic

A horizontal stepper with three steps.

AccountCreate your account

ProfileSet up your profile

ReviewReview and submit

Sizes

Stepper comes in sm, md, and lg sizes.

Size: sm

Step 1First

Step 2Second

Step 3Third

Size: md

Step 1First

Step 2Second

Step 3Third

Size: lg

Step 1First

Step 2Second

Step 3Third

Vertical

Vertical stepper layout for sidebar-style flows.

Create AccountEnter email and password

Verify EmailCheck your inbox

Complete ProfileAdd your details

All Complete

Show a completed stepper when all steps are done.

AccountCreated

ProfileCompleted

ReviewSubmitted

API Reference

Complete list of props for the Stepper component and its sub-components.

Stepper (Root)

Prop	Type	Default	Description
`activeStep*`	`number`	-	Current active step index (0-based)
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientation of the stepper
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the stepper
`aria-label`	`string`	`'Progress'`	Accessible label for the stepper list
`className`	`string`	-	Additional CSS classes

Stepper.Step

Prop	Type	Default	Description
`label*`	`string`	-	Step label text
`description`	`string`	-	Optional step description
`icon`	`ReactNode`	-	Optional custom icon
`optional`	`boolean`	`false`	Whether the step is optional

Accessibility

Root renders as role="list" with a customizable aria-label (default: "Progress")
Each step renders as role="listitem" with an aria-label describing step number, label, and status
Step status (complete, current, upcoming) is conveyed via data-status and the listitem aria-label
Separators are hidden from assistive technology via aria-hidden="true"
Step index is computed via React context — no cloneElement or prop injection required
Optional steps include "(optional)" in the aria-label