StorybookGitHub

Stepper

A set of steps that are used to indicate progress through a multi-step process.

Address

Add your address

Shipping

Choose a carrier

Payment

Add payment details

Step 2 of 0

Installation 

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/stepper.json

Usage

Use stepper to walk users through a sequence of steps, such as a checkout or onboarding flow. Each StepperItem represents one step and tracks its own active/completed state via reka-ui.

<script setup lang="ts">
import {
  Stepper,
  StepperDescription,
  StepperIndicator,
  StepperItem,
  StepperSeparator,
  StepperTitle,
  StepperTrigger,
} from "@/components/ui/stepper";

const steps = [
  { step: 1, title: "Address", description: "Add your address" },
  { step: 2, title: "Shipping", description: "Set shipping details" },
  { step: 3, title: "Confirm", description: "Review your order" },
];
</script>

<template>
  <Stepper default-value="1">
    <StepperItem
      v-for="item in steps"
      :key="item.step"
      :step="item.step"
      class="relative flex-1"
    >
      <StepperTrigger>
        <StepperIndicator>{{ item.step }}</StepperIndicator>
        <div class="flex flex-col">
          <StepperTitle>{{ item.title }}</StepperTitle>
          <StepperDescription>{{ item.description }}</StepperDescription>
        </div>
      </StepperTrigger>
      <StepperSeparator
        v-if="item.step !== steps[steps.length - 1].step"
        class="absolute top-4 left-[calc(50%+1.25rem)] h-0.5 w-[calc(100%-2.5rem)]"
      />
    </StepperItem>
  </Stepper>
</template>