Stepper

<Stepper activeStep={1}>
  <StepperItem step={0}>
    <StepperTrigger>
      <HugeIcon icon={Tick02Icon} class="size-4" />
    </StepperTrigger>
    <div>
      <StepperTitle>Account</StepperTitle>
      <StepperDescription>Your details</StepperDescription>
    </div>
  </StepperItem>
  <StepperSeparator />
  <StepperItem step={1}>
    <StepperTrigger>2</StepperTrigger>
    <div>
      <StepperTitle>Profile</StepperTitle>
      <StepperDescription>Basic info</StepperDescription>
    </div>
  </StepperItem>
  <StepperSeparator />
  <StepperItem step={2}>
    <StepperTrigger>3</StepperTrigger>
    <div>
      <StepperTitle>Complete</StepperTitle>
      <StepperDescription>Final review</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>
      <HugeIcon icon={Tick02Icon} 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>
      <HugeIcon icon={UserIcon} class="size-4" />
    </StepperTrigger>
    <StepperTitle>Account</StepperTitle>
  </StepperItem>
  <StepperSeparator />
  <StepperItem step={1}>
    <StepperTrigger>
      <HugeIcon icon={Mail01Icon} class="size-4" />
    </StepperTrigger>
    <StepperTitle>Verify</StepperTitle>
  </StepperItem>
  <StepperSeparator />
  <StepperItem step={2}>
    <StepperTrigger>
      <HugeIcon icon={Settings01Icon} class="size-4" />
    </StepperTrigger>
    <StepperTitle>Setup</StepperTitle>
  </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>
      <HugeIcon icon={Tick02Icon} class="size-4" />
    </StepperTrigger>
    <StepperTitle>Cart</StepperTitle>
  </StepperItem>
  <StepperSeparator />
  <StepperItem step={1}>
    <StepperTrigger>
      <HugeIcon icon={Tick02Icon} class="size-4" />
    </StepperTrigger>
    <StepperTitle>Shipping</StepperTitle>
  </StepperItem>
  <StepperSeparator />
  <StepperItem step={2}>
    <StepperTrigger>
      <HugeIcon icon={CreditCardIcon} 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>
      <HugeIcon icon={Tick02Icon} 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>
      <HugeIcon icon={Shield01Icon} 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>
      <HugeIcon icon={PackageIcon} class="size-4" />
    </StepperTrigger>
    <div>
      <StepperTitle>Choose your plan</StepperTitle>
      <StepperDescription>Select a subscription that fits your needs.</StepperDescription>
    </div>
  </StepperItem>
</Stepper>

Linear (gated)

With linear, users can’t jump ahead by clicking steps — only steps they’ve already reached are clickable. Advance with a button carrying data-stepper-next (and go back with data-stepper-prev). Panels with data-stepper-content and a data-step index show the active step’s content.

Fill in your details, then continue.

<div class="space-y-6">
  <Stepper linear 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>

  <div data-stepper-content data-step="0" class="text-sm text-muted-foreground">
    Fill in your details, then continue.
  </div>
  <div data-stepper-content data-step="1" class="text-sm text-muted-foreground" hidden>
    Enter payment information.
  </div>
  <div data-stepper-content data-step="2" class="text-sm text-muted-foreground" hidden>
    Review everything and finish.
  </div>

  <div class="flex gap-2">
    <Button variant="outline" data-stepper-prev>Back</Button>
    <Button data-stepper-next>Next</Button>
  </div>
</div>

Props

Prop	Type	Default	Description
orientation	“horizontal” \| “vertical”	“horizontal”	Layout direction
activeStep	number	0	Current active step (0-indexed)
linear	boolean	false	Block clicking steps beyond the furthest step reached
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.

Events

The stepper dispatches a bubbling stepper-change custom event whenever the active step changes:

document.querySelector("[data-stepper]")?.addEventListener("stepper-change", (e) => {
  console.log((e as CustomEvent).detail.step); // new step index
});