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

import Stepper from "@/components/ui/stepper/Stepper.astro";
import StepperItem from "@/components/ui/stepper/StepperItem.astro";
import StepperTrigger from "@/components/ui/stepper/StepperTrigger.astro";
import StepperTitle from "@/components/ui/stepper/StepperTitle.astro";
import StepperDescription from "@/components/ui/stepper/StepperDescription.astro";
import StepperSeparator from "@/components/ui/stepper/StepperSeparator.astro";

Usage

import {
Stepper,
StepperItem,
StepperTrigger,
StepperTitle,
StepperDescription,
StepperSeparator,
} from "@/components/ui/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>

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. Clicking navigates to that step.

StepperTitle, StepperDescription

Style components for step labels.

StepperSeparator

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