Shadcn Stepper

Custom Shadcn Stepper for React and Tailwind CSS. A step-by-step process for users to navigate through a series of steps.

Radix UI Base UI

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
}

More Shadcn Stepper components

Browse 15 production-ready Shadcn Stepper components for dashboards, forms, and product UI. These examples follow the Radix UI implementation with accessible primitives from the Radix stack and stay fully compatible with Shadcn Create so radius, color, and typography match your configured theme.

Browse all 15 Shadcn Stepper components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the ReUI library.

Sortable Timeline