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="uc-flex uc-items-center">
  <div class="step completed">1</div>
  <div class="uc-flex-1 uc-h-0.5 uc-bg-accents-blue"></div>
  <div class="step current">2</div>
  <div class="uc-flex-1 uc-h-0.5 uc-bg-border-default"></div>
  <div class="step upcoming">3</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="uc-max-w-md">
  <!-- Step 1: Completed -->
  <div class="uc-flex uc-gap-4">
    <div class="uc-flex uc-flex-col uc-items-center">
      <div class="uc-w-8 uc-h-8 uc-rounded-full uc-bg-accents-blue uc-flex uc-items-center uc-justify-center">...</div>
      <div class="uc-w-0.5 uc-flex-1 uc-bg-accents-blue"></div>
    </div>
    <div>
      <p class="uc-text-sm uc-font-medium uc-text-accents-blue">Account</p>
      <p class="uc-text-sm uc-text-fg-disabled">Create your account credentials</p>
    </div>
  </div>
  <!-- Step 2: Current -->
  <div class="uc-flex uc-gap-4">
    <div class="uc-flex uc-flex-col uc-items-center">
      <div class="uc-w-8 uc-h-8 uc-rounded-full uc-bg-accents-blue uc-ring-4 uc-flex uc-items-center uc-justify-center">2</div>
      <div class="uc-w-0.5 uc-flex-1 uc-bg-border-default"></div>
    </div>
    <div>
      <p class="uc-text-sm uc-font-medium uc-text-accents-blue">Profile</p>
      <p class="uc-text-sm uc-text-fg-disabled">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="uc-flex uc-items-start">
  <!-- Step 1: Completed -->
  <div class="uc-flex-1 uc-flex uc-flex-col uc-items-center uc-text-center">
    <div class="uc-w-8 uc-h-8 uc-rounded-full uc-bg-accents-blue">...</div>
    <p class="uc-mt-2 uc-text-sm uc-font-medium uc-text-accents-blue">Account</p>
    <p class="uc-text-xs uc-text-fg-disabled">Create your account</p>
  </div>
  <div class="uc-flex-1 uc-h-0.5 uc-bg-accents-blue uc-mt-4"></div>
  <!-- Step 2: Current -->
  <div class="uc-flex-1 uc-flex uc-flex-col uc-items-center uc-text-center">
    <div class="uc-w-8 uc-h-8 uc-rounded-full uc-bg-accents-blue uc-ring-4">2</div>
    <p class="uc-mt-2 uc-text-sm uc-font-medium uc-text-accents-blue">Details</p>
    <p class="uc-text-xs uc-text-fg-disabled">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="uc-flex uc-items-center">
  <div class="uc-w-6 uc-h-6 uc-rounded-full uc-bg-accents-blue">...</div>
  <div class="uc-flex-1 uc-h-0.5 uc-bg-accents-blue"></div>
  <div class="uc-w-6 uc-h-6 uc-rounded-full uc-bg-accents-blue uc-ring-4">2</div>
  ...
</div>

<!-- Default -->
<div class="uc-flex uc-items-center">
  <div class="uc-w-8 uc-h-8 uc-rounded-full uc-bg-accents-blue">...</div>
  <div class="uc-flex-1 uc-h-0.5 uc-bg-accents-blue"></div>
  <div class="uc-w-8 uc-h-8 uc-rounded-full uc-bg-accents-blue uc-ring-4">2</div>
  ...
</div>

<!-- Large -->
<div class="uc-flex uc-items-center">
  <div class="uc-w-10 uc-h-10 uc-rounded-full uc-bg-accents-blue">...</div>
  <div class="uc-flex-1 uc-h-0.5 uc-bg-accents-blue"></div>
  <div class="uc-w-10 uc-h-10 uc-rounded-full uc-bg-accents-blue uc-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="uc-flex uc-items-center">
  <!-- Step 1: Completed -->
  <div class="uc-flex uc-flex-col uc-items-center">
    <div class="uc-w-8 uc-h-8 uc-rounded-full uc-bg-accents-blue">...</div>
    <span class="uc-mt-2 uc-text-sm uc-font-medium uc-text-accents-blue">Account</span>
  </div>
  <div class="uc-flex-1 uc-h-0.5 uc-bg-accents-blue"></div>
  <!-- Step 2: Completed -->
  <div class="uc-flex uc-flex-col uc-items-center">
    <div class="uc-w-8 uc-h-8 uc-rounded-full uc-bg-accents-blue">...</div>
    <span class="uc-mt-2 uc-text-sm uc-font-medium uc-text-accents-blue">Profile</span>
  </div>
  <div class="uc-flex-1 uc-h-0.5 uc-bg-accents-red/30"></div>
  <!-- Step 3: Error -->
  <div class="uc-flex uc-flex-col uc-items-center">
    <div class="uc-w-8 uc-h-8 uc-rounded-full uc-bg-accents-red/10 uc-border-2 uc-border-accents-red">✕</div>
    <span class="uc-mt-2 uc-text-sm uc-font-medium uc-text-accents-red">Preferences</span>
  </div>
  ...
</div>

API Reference

All CSS classes available for the Stepper component.

Class Type Description
uc-w-6 uc-h-6 uc-rounded-full Size Small step indicator circle (24px)
uc-w-8 uc-h-8 uc-rounded-full Size Default step indicator circle (32px)
uc-w-10 uc-h-10 uc-rounded-full Size Large step indicator circle (40px)
uc-bg-accents-blue State Completed or active step background
uc-bg-neutrals-muted State Upcoming step background
uc-ring-4 uc-ring-primary/20 State Ring highlight for current active step
uc-bg-accents-red/10 uc-border-2 uc-border-accents-red State Error step styling with red border
uc-flex-1 uc-h-0.5 uc-bg-accents-blue Connector Completed connector line between steps
uc-flex-1 uc-h-0.5 uc-bg-border-default Connector Upcoming connector line between steps
uc-w-0.5 uc-flex-1 uc-bg-accents-blue Connector Vertical completed connector line
uc-w-0.5 uc-flex-1 uc-bg-border-default Connector Vertical upcoming connector line
uc-text-constant-white Typography Step number or check icon color on active steps
uc-text-fg-disabled Typography Upcoming step number and label color
uc-text-accents-blue 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