Stepper

Numbered step-by-step layout with vertical connector lines, auto-incrementing step numbers, and status indicators. Designed for installation guides, tutorials, onboarding flows, and multi-step documentation.

Preview

Install the package

Add the SDK to your project.

Configure your environment

Add required environment variables.

Start building

Import and use components in your pages.

Installation

$ shadcn add https://ui.justinlevine.me/r/stepper.json

Usage

import { Stepper, StepperItem } from "@/components/stepper"

<Stepper>
  <StepperItem title="Step one" description="Do this first." />
  <StepperItem title="Step two" description="Then do this." />
</Stepper>

Wrap StepperItem elements inside a Stepper container. Steps are auto-numbered. Nest any content — code blocks, images, forms — inside each step.

Examples

Status indicators

Use the status prop to indicate progress. Completed steps show a checkmark, active steps are highlighted, and default steps are muted.

All statuses

Account created

Your account has been set up successfully.

Configure workspace

Set up your workspace preferences and integrations.

Invite your team

Add team members and assign roles.

All completed

Order placed

Your order #4821 has been received.

Payment confirmed

We've charged your card ending in 4242.

Shipped

Tracking number: 1Z999AA10123456784

With rich content

Nest any content inside StepperItem. Code blocks, lists, images, and interactive elements all work.

Installation guide

Install the package

Add the SDK to your project.

npm install @acme/sdk

Add your API key

Create a .env.local file and add your key.

ACME_API_KEY=sk_live_abc123def456

Make your first request

Import the client and fetch data.

import { Acme } from "@acme/sdk"

const client = new Acme()
const users = await client.users.list()
console.log(users)

Horizontal orientation

Set orientation="horizontal" for a compact progress bar layout. Only the active step's content is shown.

Horizontal stepper

Details

Payment

Review

Confirm

Enter your payment information to continue.

Minimal (no descriptions)

Omit descriptions for a compact checklist-style layout.

Title only

Clone the repository

Install dependencies

Set environment variables

Run the dev server

Open in browser

Custom icons

Pass any React.ReactNode to the icon prop to replace the default step number or checkmark.

Lucide icons

Create account

Add payment method

Enter a credit card or connect a bank account.

Verify identity

Upload a photo ID to complete verification.

Emoji icons

📦

Install dependencies

Add the required packages to your project.

🔑

Configure API keys

Set up authentication credentials.

🚀

Deploy to production

Ship it to your users.

API Reference

Stepper

PropType

StepperItem

PropType

Notes

Server component. No "use client" — renders entirely on the server with zero client JS.
Auto-numbering. Steps are numbered automatically based on their order. Use the step prop to override.
No dependencies. Uses only React and Tailwind CSS — no external packages required.
Composable. Nest any content inside StepperItem — code blocks, images, forms, lists, or other components.
Horizontal mode. The horizontal orientation shows step circles with connector lines and only renders content for the active step. Ideal for checkout flows and wizards.