1

Stepper

PreviousNext

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

Step 2 content
"use client"

import {

Installation

bunx --bun shadcn@latest add @ondo-ui/stepper

Usage

import {
  Stepper,
  StepperContent,
  StepperIndicator,
  StepperItem,
  StepperNav,
  StepperPanel,
  StepperSeparator,
  StepperTrigger,
} from "@/components/ui/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 { IconCheck, IconLoader2 } from "@tabler/icons-react"

Controlled

Step 2 content
"use client"

import { useState } from "react"

Progress

1 / 4
Step 1 content
"use client"

import { useState } from "react"

Title

Step 2 content
"use client"

import { IconCheck, IconLoader2 } from "@tabler/icons-react"

Title & Bar

Payment Info content
"use client"

import {

Title & Status

Payment Info content
"use client"

import { useState } from "react"

Title & Description

Profile content
"use client"

import { IconCheck, IconLoader2 } from "@tabler/icons-react"

Inline Title

Profile content
"use client"

import { IconCheck, IconLoader2 } from "@tabler/icons-react"

Inline Title & Description

Step 2 content
"use client"

import { IconCheck, IconLoader2 } from "@tabler/icons-react"

Vertical

Step 2 content
"use client"

import { IconCheck, IconLoader2 } from "@tabler/icons-react"

Vertical Title

Profile content
"use client"

import { IconCheck, IconLoader2 } from "@tabler/icons-react"

Vertical Title & Description

Profile content
"use client"

import { IconCheck, IconLoader2 } from "@tabler/icons-react"

API Reference

Stepper

The root component that manages the active step and configuration.

PropTypeDefaultDescription
defaultValuenumber1The step index to start with (uncontrolled).
valuenumber-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.
variant"default" | "info" | "success" | "warning" | "destructive""default"The color variant shared by active and completed steps. default uses the primary color.
activeVariant"default" | "info" | "success" | "warning" | "destructive"variantOptional color override for the active step only.
indicatorsStepIndicators-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.

PropTypeDefaultDescription
stepnumber-Required. The unique index of this step.
completedbooleanfalseManually mark the step as completed.
disabledbooleanfalseDisable interactions for this step.
loadingbooleanfalseShow the loading indicator for this step.

StepperTrigger

The interactive element used to navigate between steps.

PropTypeDefaultDescription
renderReactElement-Replace the rendered element, merging the trigger's props onto it.

StepperIndicator

Displays the status of the step, such as a number, checkmark, or custom icon.

The indicator color is controlled by the parent Stepper's variant and optional activeVariant props.

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.

PropTypeDefaultDescription
valuenumber-Required. The step index this content belongs to.
forceMountbooleanfalseWhether 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
}

StepperVariant

type StepperVariant = "default" | "info" | "success" | "warning" | "destructive"