Where someone is in a process of several steps — a sign-up, a checkout, a form split into pages.
Import it from rei-kit:
import { BaseStepper } from 'rei-kit'
Open BaseStepper in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { ref } from 'vue'
import { BaseButton, BaseStepper } from 'rei-kit'
const steps = [
{ key: 'account', label: 'Account' },
{ key: 'plan', label: 'Plan' },
{ key: 'payment', label: 'Payment' },
] as const
const step = ref<(typeof steps)[number]['key']>('plan')
</script>
<template>
<BaseStepper
v-model="step"
:steps="steps"
label="Sign-up"
interactive
:state-labels="{ complete: 'done', error: 'needs attention' }"
/>
<BaseButton class="mt-4" @click="step = 'payment'">Next</BaseButton>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
steps | readonly StepperStep<K>[] | yes | |
label | string | yes | The list's accessible name, e.g. "Checkout". |
orientation | 'horizontal' | 'vertical' | 'horizontal' | |
interactive | boolean | false | Completed steps become buttons that go back to them. |
stateLabels | { complete: string; error: string } | undefined | Read to a screen reader after a step's label: `{ complete: 'done', error: 'needs attention' }`. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.