Stepper

Display progress through a multi-step process with visual step indicators.

Import


import { Stepper, LinearStepper, SegmentedStepper } from "@raydenui/ui";

Usage

Basic Stepper

Account

Profile

Review


const steps = [
  { title: "Account" },
  { title: "Profile" },
  { title: "Review" },
];
 
<Stepper steps={steps} activeStep={1} />

With Descriptions

AccountCreate your account

ProfileComplete your profile

ReviewReview and submit


const steps = [
  { title: "Account", description: "Create your account" },
  { title: "Profile", description: "Complete your profile" },
  { title: "Review", description: "Review and submit" },
];
 
<Stepper steps={steps} activeStep={0} />

Number Indicators

Account

Profile

Review


<Stepper steps={steps} activeStep={2} indicator="number" />

With Status Control

Completed

In Progress

Pending

Disabled


const steps = [
  { title: "Completed", status: "completed" },
  { title: "In Progress", status: "active" },
  { title: "Pending", status: "incomplete" },
  { title: "Disabled", status: "disabled" },
];
 
<Stepper steps={steps} />

LinearStepper

A simple progress bar showing step completion.

3 / 5 complete


<LinearStepper currentStep={3} totalSteps={5} />

Without Label


<LinearStepper currentStep={2} totalSteps={4} showLabel={false} />

SegmentedStepper

A segmented progress bar with individual step segments.

2 / 5 complete


<SegmentedStepper currentStep={2} totalSteps={5} />

Without Label


<SegmentedStepper currentStep={3} totalSteps={6} showLabel={false} />

Props

Stepper

Prop	Type	Default	Description
`steps`	`StepItem[]`	—	Array of step items (required)
`activeStep`	`number`	—	Current active step index (0-based)
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout direction
`indicator`	`"dot" \| "number" \| "icon"`	`"dot"`	Indicator style
`className`	`string`	—	Additional CSS classes

StepItem

Prop	Type	Description
`title`	`string`	Step title (required)
`description`	`string`	Optional description
`status`	`"completed" \| "active" \| "incomplete" \| "disabled"`	Step status
`icon`	`ReactNode`	Custom icon for completed/active state

LinearStepper

Prop	Type	Default	Description
`currentStep`	`number`	—	Current step (1-based, required)
`totalSteps`	`number`	—	Total number of steps (required)
`showLabel`	`boolean`	`true`	Show “X / Y complete” label
`className`	`string`	—	Additional CSS classes

SegmentedStepper

Prop	Type	Default	Description
`currentStep`	`number`	—	Current step (1-based, required)
`totalSteps`	`number`	—	Total number of steps (required)
`showLabel`	`boolean`	`true`	Show “X / Y complete” label
`className`	`string`	—	Additional CSS classes

Step Status

Status	Circle Style	Text Style
`completed`	Primary background, white check	Grey text
`active`	Primary border, dot/number	Dark text
`incomplete`	Grey border	Grey text
`disabled`	Grey background	Light grey text

Accessibility

Step indicators use semantic HTML
Active step is visually distinguished
Connector lines show progress relationships
Supports keyboard navigation