Stepper

A step-by-step process for users to navigate through a series of steps.

Step 2 content

"use client"

import {

Installation


pnpm dlx shadcn@latest add @reui/stepper

Usage

import {
  Stepper,
  StepperContent,
  StepperIndicator,
  StepperItem,
  StepperNav,
  StepperPanel,
  StepperSeparator,
  StepperTrigger,
} from "@/components/reui/stepper"

<Stepper defaultValue={1}>
  <StepperNav>
    <StepperItem step={1}>
      <StepperTrigger>
        <StepperIndicator>1</StepperIndicator>
      </StepperTrigger>
      <StepperSeparator />
    </StepperItem>
    <StepperItem step={2}>
      <StepperTrigger>
        <StepperIndicator>2</StepperIndicator>
      </StepperTrigger>
    </StepperItem>
  </StepperNav>
  <StepperPanel>
    <StepperContent value={1}>Content 1</StepperContent>
    <StepperContent value={2}>Content 2</StepperContent>
  </StepperPanel>
</Stepper>

Examples

States

Step 2 content

"use client"

import {

Indicators

Step 2 content

"use client"

import {

Controlled

Step 2 content

"use client"

import { useState } from "react"

Progress

Step Step 2 content

"use client"

import {

Title

Payment Info content

"use client"

import {

Title & Bar

Payment Info content

"use client"

import { useState } from "react"

Title & Status

Profile content

"use client"

import {

Title & Description

Profile content

"use client"

import {

Inline Title

Step 2 content

"use client"

import {

Inline Title & Description

Payment Info content

"use client"

import {

Vertical

1 / 4

Step 1 content

"use client"

import { useState } from "react"

Vertical Title

Profile content

"use client"

import {

Vertical Title & Description

Step 2 content

"use client"

import {

API Reference

Stepper

The root component that manages the active step and configuration.

Prop	Type	Default	Description
`defaultValue`	`number`	`1`	The step index to start with (uncontrolled).
`value`	`number`	-	The current active step index (controlled).
`onValueChange`	`(value: number) => void`	-	Callback fired when the active step changes.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	The layout direction of the stepper.
`indicators`	`StepIndicators`	-	Custom icons or elements for different step states.

StepperNav

A container for the stepper items, usually displayed as a progress bar or navigation trail.

StepperItem

Represents a single step in the process.

Prop	Type	Default	Description
`step`	`number`	-	Required. The unique index of this step.
`completed`	`boolean`	`false`	Manually mark the step as completed.
`disabled`	`boolean`	`false`	Disable interactions for this step.
`loading`	`boolean`	`false`	Show the loading indicator for this step.

StepperTrigger

The interactive element used to navigate between steps.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Whether to merge props onto the child element.

StepperIndicator

Displays the status of the step (e.g., number, checkmark, or custom icon).

StepperSeparator

A visual line between steps.

StepperTitle

The label for the step.

StepperDescription

Additional supporting text for the step.

StepperPanel

A container for step content panels.

StepperContent

The actual content associated with a specific step.

Prop	Type	Default	Description
`value`	`number`	-	Required. The step index this content belongs to.
`forceMount`	`boolean`	`false`	Whether to keep the content in the DOM when not active.

Types

StepIndicators

type StepIndicators = {
  active?: React.ReactNode
  completed?: React.ReactNode
  inactive?: React.ReactNode
  loading?: React.ReactNode
}

Sortable Timeline