Stepper — Veritheme

Default

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

html

Account

2

Profile

3

Preferences

4

Complete

<div class="vt-stepper">
  <div class="vt-stepper-step">
    <div class="vt-stepper-circle vt-bg-info-primary">1</div>
  </div>
  <div class="vt-stepper-line vt-bg-info-primary"></div>
  <div class="vt-stepper-step">
    <div class="vt-stepper-circle vt-bg-info-primary vt-ring-4">2</div>
  </div>
  <div class="vt-stepper-line vt-bg-border-default"></div>
  <div class="vt-stepper-step">
    <div class="vt-stepper-circle vt-bg-surfaces-moderate">3</div>
  </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">
  <!-- Step 1: Completed -->
  <div class="vt-flex vt-gap-4">
    <div class="vt-stepper-step">
      <div class="vt-stepper-circle vt-bg-info-primary">...</div>
      <div class="vt-w-0.5 vt-flex-1 vt-bg-info-primary"></div>
    </div>
    <div>
      <p class="vt-text-sm vt-font-medium vt-text-info-primary">Account</p>
      <p class="vt-text-sm vt-text-mains-quaternary">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-bg-info-primary vt-ring-4">2</div>
      <div class="vt-w-0.5 vt-flex-1 vt-bg-border-default"></div>
    </div>
    <div>
      <p class="vt-text-sm vt-font-medium vt-text-info-primary">Profile</p>
      <p class="vt-text-sm vt-text-mains-quaternary">Set up your personal profile</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">
  <!-- Step 1: Completed -->
  <div class="vt-flex-1 vt-stepper-step vt-text-center">
    <div class="vt-stepper-circle vt-bg-info-primary">...</div>
    <p class="vt-mt-2 vt-text-sm vt-font-medium vt-text-info-primary">Account</p>
    <p class="vt-text-xs vt-text-mains-quaternary">Create your account</p>
  </div>
  <div class="vt-stepper-line vt-bg-info-primary vt-mt-4"></div>
  <!-- Step 2: Current -->
  <div class="vt-flex-1 vt-stepper-step vt-text-center">
    <div class="vt-stepper-circle vt-bg-info-primary vt-ring-4">2</div>
    <p class="vt-mt-2 vt-text-sm vt-font-medium vt-text-info-primary">Details</p>
    <p class="vt-text-xs vt-text-mains-quaternary">Fill in your details</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

<!-- Small -->
<div class="vt-stepper">
  <div class="vt-stepper-circle vt-w-6 vt-h-6 vt-bg-info-primary">...</div>
  <div class="vt-stepper-line vt-bg-info-primary"></div>
  <div class="vt-stepper-circle vt-w-6 vt-h-6 vt-bg-info-primary vt-ring-4">2</div>
  ...
</div>

<!-- Default -->
<div class="vt-stepper">
  <div class="vt-stepper-circle vt-bg-info-primary">...</div>
  <div class="vt-stepper-line vt-bg-info-primary"></div>
  <div class="vt-stepper-circle vt-bg-info-primary vt-ring-4">2</div>
  ...
</div>

<!-- Large -->
<div class="vt-stepper">
  <div class="vt-stepper-circle vt-bg-info-primary">...</div>
  <div class="vt-stepper-line vt-bg-info-primary"></div>
  <div class="vt-stepper-circle vt-bg-info-primary vt-ring-4">2</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">
  <!-- Step 1: Completed -->
  <div class="vt-stepper-step">
    <div class="vt-stepper-circle vt-bg-info-primary">...</div>
    <span class="vt-mt-2 vt-text-sm vt-font-medium vt-text-info-primary">Account</span>
  </div>
  <div class="vt-stepper-line vt-bg-info-primary"></div>
  <!-- Step 2: Completed -->
  <div class="vt-stepper-step">
    <div class="vt-stepper-circle vt-bg-info-primary">...</div>
    <span class="vt-mt-2 vt-text-sm vt-font-medium vt-text-info-primary">Profile</span>
  </div>
  <div class="vt-stepper-line vt-bg-error-primary/30"></div>
  <!-- Step 3: Error -->
  <div class="vt-stepper-step">
    <div class="vt-stepper-circle vt-bg-error-primary/10 vt-border-2 vt-border-error-primary">✕</div>
    <span class="vt-mt-2 vt-text-sm vt-font-medium vt-text-error-primary">Preferences</span>
  </div>
  ...
</div>

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-info-primary`	State	Completed or active step background
`vt-bg-surfaces-moderate`	State	Upcoming step background
`vt-ring-4 vt-ring-primary/20`	State	Ring highlight for current active step
`vt-bg-error-primary/10 vt-border-2 vt-border-error-primary`	State	Error step styling with red border
`vt-stepper-line vt-bg-info-primary`	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-info-primary`	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-mains-quaternary`	Typography	Upcoming step number and label color
`vt-text-info-primary`	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