Skip to content


KStepper is an ordered step indicator.

  1. Completed
    Personal Information
  2. Billing Details
  3. Shipping Information
<KStepper :steps="steps" />



An array of step objects. Each step object should have a required label property, and an optional state property.

step property takes one of the following values:

  • active
  • default
  • pending
  • completed
  • error
  1. Completed
    Completed step
  2. Active step
  3. Pending
    Pending step
  4. Error
    Erroneous step
  5. Default step
  <KStepper :steps="steps" />

<script setup lang="ts">
const steps = ref<StepItem[]>([
  { label: 'Completed step', state: 'completed' },
  { label: 'Active step', state: 'active' },
  { label: 'Pending step', state: 'pending' },
  { label: 'Erroneous step', state: 'error' },
  { label: 'Default step' }


The width of step labels (default is 170px). We support numbers (will be converted to px), auto, and percentages (e.g. 25%) for values.

  1. Completed
    Step a long long long long time ago
  2. Completed
    in a galaxy far far away
  3. Pending
    Kongponents were battling in space and
  4. fighting robots and space monsters with lots of explosions
<KStepper max-label-width="120" :steps="steps" />

Released under the Apache-2.0 License.