Stepper

<Stepper activeStep={1}>
  <StepperItem step={0}>
    <StepperTrigger>
      <Check class="size-4" />
    </StepperTrigger>
    <div>
      <StepperTitle>Account</StepperTitle>
      <StepperDescription>Create your account</StepperDescription>
    </div>
  </StepperItem>
  <StepperSeparator />
  <StepperItem step={1}>
    <StepperTrigger>2</StepperTrigger>
    <div>
      <StepperTitle>Profile</StepperTitle>
      <StepperDescription>Set up your profile</StepperDescription>
    </div>
  </StepperItem>
  <StepperSeparator />
  <StepperItem step={2}>
    <StepperTrigger>3</StepperTrigger>
    <div>
      <StepperTitle>Complete</StepperTitle>
      <StepperDescription>Review and finish</StepperDescription>
    </div>
  </StepperItem>
</Stepper>

Installation

npx bearnie add stepper

Usage

import {
  Stepper,
  StepperItem,
  StepperTrigger,
  StepperTitle,
  StepperDescription,
  StepperSeparator,
} from "@/components/bearnie/stepper"

<Stepper activeStep={0}>
  <StepperItem step={0}>
    <StepperTrigger>1</StepperTrigger>
    <StepperTitle>Step One</StepperTitle>
  </StepperItem>
  <StepperSeparator />
  <StepperItem step={1}>
    <StepperTrigger>2</StepperTrigger>
    <StepperTitle>Step Two</StepperTitle>
  </StepperItem>
</Stepper>

Examples

Simple stepper

<Stepper activeStep={0}>
  <StepperItem step={0}>
    <StepperTrigger>1</StepperTrigger>
    <StepperTitle>Details</StepperTitle>
  </StepperItem>
  <StepperSeparator />
  <StepperItem step={1}>
    <StepperTrigger>2</StepperTrigger>
    <StepperTitle>Payment</StepperTitle>
  </StepperItem>
  <StepperSeparator />
  <StepperItem step={2}>
    <StepperTrigger>3</StepperTrigger>
    <StepperTitle>Confirm</StepperTitle>
  </StepperItem>
</Stepper>

Vertical orientation

<Stepper orientation="vertical" activeStep={1}>
  <StepperItem step={0}>
    <StepperTrigger>
      <Check class="size-4" />
    </StepperTrigger>
    <div>
      <StepperTitle>Create account</StepperTitle>
      <StepperDescription>Enter your email and password</StepperDescription>
    </div>
  </StepperItem>
  <StepperSeparator />
  <StepperItem step={1}>
    <StepperTrigger>2</StepperTrigger>
    <div>
      <StepperTitle>Verify email</StepperTitle>
      <StepperDescription>Check your inbox</StepperDescription>
    </div>
  </StepperItem>
  <StepperSeparator />
  <StepperItem step={2}>
    <StepperTrigger>3</StepperTrigger>
    <div>
      <StepperTitle>Complete setup</StepperTitle>
      <StepperDescription>Add your profile</StepperDescription>
    </div>
  </StepperItem>
</Stepper>

With icons

Use icons instead of numbers for a more visual representation.

<Stepper activeStep={1}>
  <StepperItem step={0}>
    <StepperTrigger>
      <User class="size-4" />
    </StepperTrigger>
    <StepperTitle>Account</StepperTitle>
  </StepperItem>
  <StepperSeparator />
  <StepperItem step={1}>
    <StepperTrigger>
      <Mail class="size-4" />
    </StepperTrigger>
    <StepperTitle>Verify</StepperTitle>
  </StepperItem>
  <StepperSeparator />
  <StepperItem step={2}>
    <StepperTrigger>
      <Settings class="size-4" />
    </StepperTrigger>
    <StepperTitle>Setup</StepperTitle>
  </StepperItem>
</Stepper>

With large titles

Use custom classes to create larger, more prominent titles.

<Stepper activeStep={0}>
  <StepperItem step={0}>
    <StepperTrigger>1</StepperTrigger>
    <div>
      <StepperTitle class="text-lg font-semibold">Getting Started</StepperTitle>
      <StepperDescription>Begin your journey here</StepperDescription>
    </div>
  </StepperItem>
  <StepperSeparator />
  <StepperItem step={1}>
    <StepperTrigger>2</StepperTrigger>
    <div>
      <StepperTitle class="text-lg font-semibold">Configuration</StepperTitle>
      <StepperDescription>Set up your preferences</StepperDescription>
    </div>
  </StepperItem>
  <StepperSeparator />
  <StepperItem step={2}>
    <StepperTrigger>3</StepperTrigger>
    <div>
      <StepperTitle class="text-lg font-semibold">Launch</StepperTitle>
      <StepperDescription>Go live with your project</StepperDescription>
    </div>
  </StepperItem>
</Stepper>

With anchor links

Use the href prop to create steps that link to page sections. A link icon appears on hover.

<Stepper activeStep={0}>
  <StepperItem step={0}>
    <StepperTrigger href="#introduction">1</StepperTrigger>
    <StepperTitle>Introduction</StepperTitle>
  </StepperItem>
  <StepperSeparator />
  <StepperItem step={1}>
    <StepperTrigger href="#installation">2</StepperTrigger>
    <StepperTitle>Installation</StepperTitle>
  </StepperItem>
  <StepperSeparator />
  <StepperItem step={2}>
    <StepperTrigger href="#usage">3</StepperTrigger>
    <StepperTitle>Usage</StepperTitle>
  </StepperItem>
</Stepper>

With custom letters

Use letters or custom text instead of numbers.

<Stepper activeStep={1}>
  <StepperItem step={0}>
    <StepperTrigger>A</StepperTrigger>
    <StepperTitle>Alpha</StepperTitle>
  </StepperItem>
  <StepperSeparator />
  <StepperItem step={1}>
    <StepperTrigger>B</StepperTrigger>
    <StepperTitle>Beta</StepperTitle>
  </StepperItem>
  <StepperSeparator />
  <StepperItem step={2}>
    <StepperTrigger>C</StepperTrigger>
    <StepperTitle>Release</StepperTitle>
  </StepperItem>
</Stepper>

Completed steps with checkmark

Show a checkmark icon for completed steps.

<Stepper activeStep={2}>
  <StepperItem step={0}>
    <StepperTrigger>
      <Check class="size-4" />
    </StepperTrigger>
    <StepperTitle>Cart</StepperTitle>
  </StepperItem>
  <StepperSeparator />
  <StepperItem step={1}>
    <StepperTrigger>
      <Check class="size-4" />
    </StepperTrigger>
    <StepperTitle>Shipping</StepperTitle>
  </StepperItem>
  <StepperSeparator />
  <StepperItem step={2}>
    <StepperTrigger>
      <CreditCard class="size-4" />
    </StepperTrigger>
    <StepperTitle>Payment</StepperTitle>
  </StepperItem>
  <StepperSeparator />
  <StepperItem step={3}>
    <StepperTrigger>4</StepperTrigger>
    <StepperTitle>Confirm</StepperTitle>
  </StepperItem>
</Stepper>

Vertical with icons and descriptions

A complete vertical stepper with icons and detailed descriptions.

<Stepper orientation="vertical" activeStep={1}>
  <StepperItem step={0}>
    <StepperTrigger>
      <Check class="size-4" />
    </StepperTrigger>
    <div>
      <StepperTitle>Create your account</StepperTitle>
      <StepperDescription>Sign up with your email address and create a secure password.</StepperDescription>
    </div>
  </StepperItem>
  <StepperSeparator />
  <StepperItem step={1}>
    <StepperTrigger>
      <Shield class="size-4" />
    </StepperTrigger>
    <div>
      <StepperTitle>Verify your identity</StepperTitle>
      <StepperDescription>Complete two-factor authentication for enhanced security.</StepperDescription>
    </div>
  </StepperItem>
  <StepperSeparator />
  <StepperItem step={2}>
    <StepperTrigger>
      <Package class="size-4" />
    </StepperTrigger>
    <div>
      <StepperTitle>Choose your plan</StepperTitle>
      <StepperDescription>Select a subscription that fits your needs.</StepperDescription>
    </div>
  </StepperItem>
</Stepper>

Props

Prop	Type	Default	Description
orientation	”horizontal” \| “vertical"	"horizontal”	Layout direction
activeStep	number	0	Current active step (0-indexed)
class	string	-	Additional CSS classes

StepperItem

Prop	Type	Default	Description
step	number	required	Step index (0-indexed)
class	string	-	Additional CSS classes

StepperTrigger

Renders as a button by default. When href is provided, renders as an anchor link with a link icon on hover.

Prop	Type	Default	Description
href	string	-	When provided, renders as an anchor link
class	string	-	Additional CSS classes

StepperTitle, StepperDescription

Style components for step labels.

StepperSeparator

Visual connector between steps. Place between StepperItem components. Automatically adapts to orientation.