Stepper

A set of steps that are used to indicate progress through a multi-step process.

Component Source Primitive API Reference
Step 1 of 0

Installation ​

bash
npx shadcn-vue@latest add stepper

Usage ​

vue
<script setup lang="ts">
import {
  Stepper,
  StepperDescription,
  StepperIndicator,
  StepperItem,
  StepperSeparator,
  StepperTitle,
  StepperTrigger,
} from '@/components/ui/stepper'
</script>

<template>
  <Stepper>
    <StepperItem :step="1">
      <StepperTrigger>
        <StepperIndicator>1</StepperIndicator>
        <StepperTitle>Step 1</StepperTitle>
        <StepperDescription>This is the first step</StepperDescription>
      </StepperTrigger>
      <StepperSeparator />
    </StepperItem>
    <StepperItem :step="2">
      <StepperTrigger>
        <StepperIndicator>2</StepperIndicator>
        <StepperTitle>Step 2</StepperTitle>
        <StepperDescription>This is the second step</StepperDescription>
      </StepperTrigger>
    </StepperItem>
  </Stepper>
</template>

Examples ​

Horizontal ​

Your details

Provide your name and email

Company details

A few details about your company

Invite your team

Start collaborating with your team

Step 1 of 0

Vertical ​

Your details

Provide your name and email address. We will use this information to create your account

Company details

A few details about your company will help us personalize your experience

Invite your team

Start collaborating with your team by inviting them to join your account. You can skip this step and invite them later

Step 1 of 0

Form ​

Your details

Provide your name and email

Your password

Choose a password

Your Favorite Drink

Choose a drink

Step 1 of 0
Edit this page on GitHub