v1.1.1

Stepper

A step indicator showing progress through a multi-step process.

Default

Horizontal stepper with completed, current, and upcoming steps connected by lines.

html
Account
2
Profile
3
Preferences
4
Complete 
<div class="vt-stepper vt-max-w-2xl vt-mx-auto">
  <!-- Step 1: Completed -->
  <div class="vt-stepper-step">
    <div class="vt-stepper-circle vt-w-8 vt-h-8 vt-bg-brand-fill">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-generic-white">
        <path d="M20 6 9 17l-5-5"></path>
      </svg>
    </div>
    <span class="vt-mt-2 vt-text-sm vt-font-medium vt-text-brand-fill">Account</span>
  </div>
  <!-- Line: Completed -->
  <div class="vt-stepper-line vt-bg-brand-fill"></div>
  <!-- Step 2: Current -->
  <div class="vt-stepper-step">
    <div class="vt-stepper-circle vt-w-8 vt-h-8 vt-bg-brand-fill vt-ring-4 vt-ring-primary/20">
      <span class="vt-text-sm vt-font-semibold vt-text-generic-white">2</span>
    </div>
    <span class="vt-mt-2 vt-text-sm vt-font-medium vt-text-brand-fill">Profile</span>
  </div>
  <!-- Line: Upcoming -->
  <div class="vt-stepper-line vt-bg-border-default"></div>
  <!-- Step 3: Upcoming -->
  <div class="vt-stepper-step">
    <div class="vt-stepper-circle vt-w-8 vt-h-8 vt-bg-surface-moderate">
      <span class="vt-text-sm vt-font-medium vt-text-foreground-muted">3</span>
    </div>
    <span class="vt-mt-2 vt-text-sm vt-text-foreground-muted">Preferences</span>
  </div>
  <!-- Line: Upcoming -->
  <div class="vt-stepper-line vt-bg-border-default"></div>
  <!-- Step 4: Upcoming -->
  <div class="vt-stepper-step">
    <div class="vt-stepper-circle vt-w-8 vt-h-8 vt-bg-surface-moderate">
      <span class="vt-text-sm vt-font-medium vt-text-foreground-muted">4</span>
    </div>
    <span class="vt-mt-2 vt-text-sm vt-text-foreground-muted">Complete</span>
  </div>
</div>

Vertical

Vertically stacked stepper with circles connected by vertical lines.

html

Account

Create your account credentials

2

Profile

Set up your personal profile

3

Preferences

Configure your preferences

4

Complete

Review and finish setup

<div class="vt-max-w-md vt-mx-auto">
  <!-- Step 1: Completed -->
  <div class="vt-flex vt-gap-4">
    <div class="vt-stepper-step">
      <div class="vt-stepper-circle vt-w-8 vt-h-8 vt-bg-brand-fill vt-shrink-0">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-generic-white">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
      </div>
      <div class="vt-w-0.5 vt-flex-1 vt-bg-brand-fill vt-my-1"></div>
    </div>
    <div class="vt-pb-8">
      <p class="vt-text-sm vt-font-medium vt-text-brand-fill">Account</p>
      <p class="vt-text-sm vt-text-foreground-muted vt-mt-0.5">Create your account credentials</p>
    </div>
  </div>
  <!-- Step 2: Current -->
  <div class="vt-flex vt-gap-4">
    <div class="vt-stepper-step">
      <div class="vt-stepper-circle vt-w-8 vt-h-8 vt-bg-brand-fill vt-ring-4 vt-ring-primary/20 vt-shrink-0">
        <span class="vt-text-sm vt-font-semibold vt-text-generic-white">2</span>
      </div>
      <div class="vt-w-0.5 vt-flex-1 vt-bg-border-default vt-my-1"></div>
    </div>
    <div class="vt-pb-8">
      <p class="vt-text-sm vt-font-medium vt-text-brand-fill">Profile</p>
      <p class="vt-text-sm vt-text-foreground-muted vt-mt-0.5">Set up your personal profile</p>
    </div>
  </div>
  <!-- Step 3: Upcoming -->
  <div class="vt-flex vt-gap-4">
    <div class="vt-stepper-step">
      <div class="vt-stepper-circle vt-w-8 vt-h-8 vt-bg-surface-moderate vt-shrink-0">
        <span class="vt-text-sm vt-font-medium vt-text-foreground-muted">3</span>
      </div>
      <div class="vt-w-0.5 vt-flex-1 vt-bg-border-default vt-my-1"></div>
    </div>
    <div class="vt-pb-8">
      <p class="vt-text-sm vt-font-medium vt-text-foreground-muted">Preferences</p>
      <p class="vt-text-sm vt-text-foreground-muted vt-mt-0.5">Configure your preferences</p>
    </div>
  </div>
  <!-- Step 4: Upcoming -->
  <div class="vt-flex vt-gap-4">
    <div class="vt-stepper-step">
      <div class="vt-stepper-circle vt-w-8 vt-h-8 vt-bg-surface-moderate vt-shrink-0">
        <span class="vt-text-sm vt-font-medium vt-text-foreground-muted">4</span>
      </div>
    </div>
    <div>
      <p class="vt-text-sm vt-font-medium vt-text-foreground-muted">Complete</p>
      <p class="vt-text-sm vt-text-foreground-muted vt-mt-0.5">Review and finish setup</p>
    </div>
  </div>
</div>

With Descriptions

Horizontal stepper where each step includes a title and a description below.

html

Account

Create your account

2

Details

Fill in your details

3

Preferences

Set your preferences

4

Complete

Review and confirm

<div class="vt-flex vt-items-start vt-w-full vt-max-w-3xl vt-mx-auto">
  <!-- Step 1: Completed -->
  <div class="vt-flex-1 vt-stepper-step vt-text-center">
    <div class="vt-stepper-circle vt-w-8 vt-h-8 vt-bg-brand-fill">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-generic-white">
        <path d="M20 6 9 17l-5-5"></path>
      </svg>
    </div>
    <p class="vt-mt-2 vt-text-sm vt-font-medium vt-text-brand-fill">Account</p>
    <p class="vt-text-xs vt-text-foreground-muted vt-mt-0.5">Create your account</p>
  </div>
  <!-- Line: Completed -->
  <div class="vt-stepper-line vt-bg-brand-fill vt-mt-4 vt--mx-2"></div>
  <!-- Step 2: Current -->
  <div class="vt-flex-1 vt-stepper-step vt-text-center">
    <div class="vt-stepper-circle vt-w-8 vt-h-8 vt-bg-brand-fill vt-ring-4 vt-ring-primary/20">
      <span class="vt-text-sm vt-font-semibold vt-text-generic-white">2</span>
    </div>
    <p class="vt-mt-2 vt-text-sm vt-font-medium vt-text-brand-fill">Details</p>
    <p class="vt-text-xs vt-text-foreground-muted vt-mt-0.5">Fill in your details</p>
  </div>
  <!-- Line: Upcoming -->
  <div class="vt-stepper-line vt-bg-border-default vt-mt-4 vt--mx-2"></div>
  <!-- Step 3: Upcoming -->
  <div class="vt-flex-1 vt-stepper-step vt-text-center">
    <div class="vt-stepper-circle vt-w-8 vt-h-8 vt-bg-surface-moderate">
      <span class="vt-text-sm vt-font-medium vt-text-foreground-muted">3</span>
    </div>
    <p class="vt-mt-2 vt-text-sm vt-font-medium vt-text-foreground-muted">Preferences</p>
    <p class="vt-text-xs vt-text-foreground-muted vt-mt-0.5">Set your preferences</p>
  </div>
  <!-- Line: Upcoming -->
  <div class="vt-stepper-line vt-bg-border-default vt-mt-4 vt--mx-2"></div>
  <!-- Step 4: Upcoming -->
  <div class="vt-flex-1 vt-stepper-step vt-text-center">
    <div class="vt-stepper-circle vt-w-8 vt-h-8 vt-bg-surface-moderate">
      <span class="vt-text-sm vt-font-medium vt-text-foreground-muted">4</span>
    </div>
    <p class="vt-mt-2 vt-text-sm vt-font-medium vt-text-foreground-muted">Complete</p>
    <p class="vt-text-xs vt-text-foreground-muted vt-mt-0.5">Review and confirm</p>
  </div>
</div>

Sizes

Stepper in small, default, and large size variants.

html

Small

Account
2
Profile
3
Preferences
4
Complete

Default

Account
2
Profile
3
Preferences
4
Complete

Large

Account
2
Profile
3
Preferences
4
Complete 
<div>
  <p class="vt-text-xs vt-text-foreground-muted vt-mb-4">Small</p>
  <div class="vt-stepper vt-max-w-xl vt-mx-auto">
    <div class="vt-stepper-step">
      <div class="vt-stepper-circle vt-w-6 vt-h-6 vt-bg-brand-fill">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-3 vt-h-3 vt-text-generic-white">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
      </div>
      <span class="vt-mt-1.5 vt-text-xs vt-font-medium vt-text-brand-fill">Account</span>
    </div>
    <div class="vt-stepper-line vt-bg-brand-fill"></div>
    <div class="vt-stepper-step">
      <div class="vt-stepper-circle vt-w-6 vt-h-6 vt-bg-brand-fill vt-ring-4 vt-ring-primary/20">
        <span class="vt-text-xs vt-font-semibold vt-text-generic-white">2</span>
      </div>
      <span class="vt-mt-1.5 vt-text-xs vt-font-medium vt-text-brand-fill">Profile</span>
    </div>
    <div class="vt-stepper-line vt-bg-border-default"></div>
    <div class="vt-stepper-step">
      <div class="vt-stepper-circle vt-w-6 vt-h-6 vt-bg-surface-moderate">
        <span class="vt-text-xs vt-font-medium vt-text-foreground-muted">3</span>
      </div>
      <span class="vt-mt-1.5 vt-text-xs vt-text-foreground-muted">Preferences</span>
    </div>
    <div class="vt-stepper-line vt-bg-border-default"></div>
    <div class="vt-stepper-step">
      <div class="vt-stepper-circle vt-w-6 vt-h-6 vt-bg-surface-moderate">
        <span class="vt-text-xs vt-font-medium vt-text-foreground-muted">4</span>
      </div>
      <span class="vt-mt-1.5 vt-text-xs vt-text-foreground-muted">Complete</span>
    </div>
  </div>
</div>

<div>
  <p class="vt-text-xs vt-text-foreground-muted vt-mb-4">Default</p>
  <div class="vt-stepper vt-max-w-xl vt-mx-auto">
    <div class="vt-stepper-step">
      <div class="vt-stepper-circle vt-w-8 vt-h-8 vt-bg-brand-fill">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-generic-white">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
      </div>
      <span class="vt-mt-2 vt-text-sm vt-font-medium vt-text-brand-fill">Account</span>
    </div>
    <div class="vt-stepper-line vt-bg-brand-fill"></div>
    <div class="vt-stepper-step">
      <div class="vt-stepper-circle vt-w-8 vt-h-8 vt-bg-brand-fill vt-ring-4 vt-ring-primary/20">
        <span class="vt-text-sm vt-font-semibold vt-text-generic-white">2</span>
      </div>
      <span class="vt-mt-2 vt-text-sm vt-font-medium vt-text-brand-fill">Profile</span>
    </div>
    <div class="vt-stepper-line vt-bg-border-default"></div>
    <div class="vt-stepper-step">
      <div class="vt-stepper-circle vt-w-8 vt-h-8 vt-bg-surface-moderate">
        <span class="vt-text-sm vt-font-medium vt-text-foreground-muted">3</span>
      </div>
      <span class="vt-mt-2 vt-text-sm vt-text-foreground-muted">Preferences</span>
    </div>
    <div class="vt-stepper-line vt-bg-border-default"></div>
    <div class="vt-stepper-step">
      <div class="vt-stepper-circle vt-w-8 vt-h-8 vt-bg-surface-moderate">
        <span class="vt-text-sm vt-font-medium vt-text-foreground-muted">4</span>
      </div>
      <span class="vt-mt-2 vt-text-sm vt-text-foreground-muted">Complete</span>
    </div>
  </div>
</div>

<div>
  <p class="vt-text-xs vt-text-foreground-muted vt-mb-4">Large</p>
  <div class="vt-stepper vt-max-w-2xl vt-mx-auto">
    <div class="vt-stepper-step">
      <div class="vt-stepper-circle vt-bg-brand-fill">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-5 vt-h-5 vt-text-generic-white">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
      </div>
      <span class="vt-mt-2 vt-text-base vt-font-medium vt-text-brand-fill">Account</span>
    </div>
    <div class="vt-stepper-line vt-bg-brand-fill"></div>
    <div class="vt-stepper-step">
      <div class="vt-stepper-circle vt-bg-brand-fill vt-ring-4 vt-ring-primary/20">
        <span class="vt-text-base vt-font-semibold vt-text-generic-white">2</span>
      </div>
      <span class="vt-mt-2 vt-text-base vt-font-medium vt-text-brand-fill">Profile</span>
    </div>
    <div class="vt-stepper-line vt-bg-border-default"></div>
    <div class="vt-stepper-step">
      <div class="vt-stepper-circle vt-bg-surface-moderate">
        <span class="vt-text-base vt-font-medium vt-text-foreground-muted">3</span>
      </div>
      <span class="vt-mt-2 vt-text-base vt-text-foreground-muted">Preferences</span>
    </div>
    <div class="vt-stepper-line vt-bg-border-default"></div>
    <div class="vt-stepper-step">
      <div class="vt-stepper-circle vt-bg-surface-moderate">
        <span class="vt-text-base vt-font-medium vt-text-foreground-muted">4</span>
      </div>
      <span class="vt-mt-2 vt-text-base vt-text-foreground-muted">Complete</span>
    </div>
  </div>
</div>

With Error

A stepper where one step shows an error state with destructive styling.

html
Account
Profile
Preferences
4
Complete 
<div class="vt-stepper vt-max-w-2xl vt-mx-auto">
  <!-- Step 1: Completed -->
  <div class="vt-stepper-step">
    <div class="vt-stepper-circle vt-w-8 vt-h-8 vt-bg-brand-fill">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-generic-white">
        <path d="M20 6 9 17l-5-5"></path>
      </svg>
    </div>
    <span class="vt-mt-2 vt-text-sm vt-font-medium vt-text-brand-fill">Account</span>
  </div>
  <!-- Line: Completed -->
  <div class="vt-stepper-line vt-bg-brand-fill"></div>
  <!-- Step 2: Completed -->
  <div class="vt-stepper-step">
    <div class="vt-stepper-circle vt-w-8 vt-h-8 vt-bg-brand-fill">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-generic-white">
        <path d="M20 6 9 17l-5-5"></path>
      </svg>
    </div>
    <span class="vt-mt-2 vt-text-sm vt-font-medium vt-text-brand-fill">Profile</span>
  </div>
  <!-- Line: Error -->
  <div class="vt-stepper-line vt-bg-error-fill/30"></div>
  <!-- Step 3: Error -->
  <div class="vt-stepper-step">
    <div class="vt-stepper-circle vt-w-8 vt-h-8 vt-bg-error-fill/10 vt-border-2 vt-border-error-fill">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-x vt-w-4 vt-h-4 vt-text-error-fill">
        <path d="M18 6 6 18"></path><path d="m6 6 12 12"></path>
      </svg>
    </div>
    <span class="vt-mt-2 vt-text-sm vt-font-medium vt-text-error-fill">Preferences</span>
  </div>
  <!-- Line: Upcoming -->
  <div class="vt-stepper-line vt-bg-border-default"></div>
  <!-- Step 4: Upcoming -->
  <div class="vt-stepper-step">
    <div class="vt-stepper-circle vt-w-8 vt-h-8 vt-bg-surface-moderate">
      <span class="vt-text-sm vt-font-medium vt-text-foreground-muted">4</span>
    </div>
    <span class="vt-mt-2 vt-text-sm vt-text-foreground-muted">Complete</span>
  </div>
</div>

Guidelines

Progress through a multi-step flow (checkout, onboarding). Location in hierarchy → breadcrumb.

Account
2
Profile
3
Complete
Do
Fill completed and current steps; keep upcoming steps muted.
1
Account
2
Profile
3
Complete
Don't
Don't fill every step identically — progress becomes unreadable.

API Reference

All CSS classes available for the Stepper component.

Class Type Description
vt-stepper Base Stepper container — flex row, items centered, full width
vt-stepper-step Base Step container — flex column, items centered, gap-2
vt-stepper-circle Base Step circle — flex centered, rounded-full, transition (default 40px)
vt-stepper-line Base Connector line between steps — flex-1, rounded-full, mx-2
vt-stepper-circle vt-w-6 vt-h-6 Size Small step indicator circle (24px)
vt-stepper-circle Size Default step indicator circle (40px)
vt-bg-brand-fill State Completed or active step background
vt-bg-surface-moderate State Upcoming step background
vt-ring-4 vt-ring-primary/20 State Ring highlight for current active step
vt-bg-error-fill/10 vt-border-2 vt-border-error-fill State Error step styling with red border
vt-stepper-line vt-bg-brand-fill Connector Completed connector line between steps
vt-stepper-line vt-bg-border-default Connector Upcoming connector line between steps
vt-w-0.5 vt-flex-1 vt-bg-brand-fill Connector Vertical completed connector line
vt-w-0.5 vt-flex-1 vt-bg-border-default Connector Vertical upcoming connector line
vt-text-generic-white Typography Step number or check icon color on active steps
vt-text-foreground-muted Typography Upcoming step number and label color
vt-text-brand-fill Typography Active/completed step label color

Accessibility

Keyboard and screen reader support.

Feature Details
Role Use role="list" for step indicators with role="listitem" for each step
Progress Announce current step via aria-current="step" on the active item
Labels Each step needs aria-label describing its position and state, e.g. "Step 2: Review, completed"
Navigation If steps are clickable, they should be buttons with proper labels
Built with:
Badge Separator