Stepper

Multi-step process visualisation with numbered indicators, titles, and connectors. Good for checkout flows and onboarding.

Default

Three-step horizontal stepper.

Step 1

Address

Where to ship

Step 2

Shipping

Carrier and speed

Step 3

Payment

Card or bank

Step 2 of 0

Usage

Import the parts you need from the component's folder.

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

Anatomy

Import all parts and piece them together.

vue

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

<template>
  <Stepper>
    <StepperItem>
      <StepperTrigger>
        <StepperIndicator />
        <StepperTitle />
        <StepperDescription />
      </StepperTrigger>
      <StepperSeparator />
    </StepperItem>
  </Stepper>
</template>

API Reference

Stepper

Prop	Type	Default	Description
`modelValue`	`number`	`1`	1-based active step. Supports v-model.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Axis.
`linear`	`boolean`	`true`	Block jumping past incomplete steps.

Event	Description
`update:modelValue`	Fires when the active step changes. Enables v-model.

Slot	Description
`default`	Scoped slot exposing the current step state for the items.

StepperItem

Prop	Type	Default	Description
`step`	`number`	—	1-based step number this item represents.
`disabled`	`boolean`	`false`	Block activating this step.

StepperTrigger / StepperIndicator

Prop	Type	Default	Description
`class`	`string`	—	Trigger makes a step clickable; Indicator renders the numbered/checked badge.

StepperTitle / StepperDescription / StepperSeparator

Prop	Type	Default	Description
`class`	`string`	—	Per-step label, helper text, and the connector line between steps.

Sidebar Tabs