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
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>