ProgressTracker

ProgressTracker is a horizontal multi-step wizard/stepper. It visually communicates completed, current, and upcoming steps.

ExamplesCodeUsageChangelog

Interactive demo

Details

Review

Confirm

Done

Current step: 0 — Details

Tailwind v4

<script setup>
import { ref } from 'vue'
const step = ref(0)
const steps = [
  { id: 'details', label: 'Details' },
  { id: 'review', label: 'Review' },
  { id: 'confirm', label: 'Confirm' },
  { id: 'done', label: 'Done' },
]
</script>

<ProgressTracker v-model="step" :steps="steps" />

<div>
  <Button @click="step--" :disabled="step === 0">Previous</Button>
  <Button @click="step++" :disabled="step === steps.length - 1">Next</Button>
</div>

Props

Prop	Type	Default	Description
modelValue	number	0	Index of the current active step (0-based)
steps	Array<{ id: string; label: string }>	—	Required. Array of step definitions

Emits

Event	Payload	Description
update:modelValue	number	Fired when a step circle is clicked, with the new step index