Skip to main content
Frutjam logo Frutjam
v2.2.1
Theme

Steps Component

A visual step indicator component built with Tailwind CSS for guiding users through multi-stage processes. Display progress through wizards, onboarding flows, and checkout funnels with numbered or icon steps. Supports horizontal, vertical, completed, and active step states.

Steps components visualize multi-step processes, guides, or workflows by displaying sequential stages. Built with semantic HTML and flexible layouts, steps show progress through setup wizards, tutorials, and complex procedures. The Frutjam steps system supports multiple sizes, colors, structures, and completion states—ideal for form wizards, installation guides, and progress tracking.

Class Type Description
stepsBaseContainer for an ordered list of steps
stepModifierIndividual step item with a numbered marker
steps-horizontalModifierHorizontal layout (default)
steps-verticalModifierVertical stacked layout
step-primaryColorPrimary theme color marker
step-secondaryColorSecondary theme color marker
step-accentColorAccent theme color marker
step-neutralColorNeutral theme color marker
step-infoColorInfo semantic color marker
step-successColorSuccess semantic color marker
step-warningColorWarning semantic color marker
step-errorColorError semantic color marker

Basic Usage

  • Shipping
  • Payment
  • Confirmation
1
2
3
4
5
<ul class="steps">
  <li class="step">Shipping</li>
  <li class="step step-primary">Payment</li>
  <li class="step">Confirmation</li>
</ul>

1
2
3
4
5
<ul className="steps">
  <li className="step">Shipping</li>
  <li className="step step-primary">Payment</li>
  <li className="step">Confirmation</li>
</ul>

Steps Layout

  • Step 1
  • Step 2
  • Step 3
html 
1
2
3
4
5
<ul class="steps steps-horizontal">
  <li class="step">Step 1</li>
  <li class="step step-primary">Step 2</li>
  <li class="step">Step 3</li>
</ul>

Step Colors

  • Primary
  • Secondary
  • Accent
  • Info
  • Success
  • Warning
  • Error
html 
1
2
3
4
5
6
7
8
9
<ul class="steps">
  <li class="step step-primary">Primary</li>
  <li class="step step-secondary">Secondary</li>
  <li class="step step-accent">Accent</li>
  <li class="step step-info">Info</li>
  <li class="step step-success">Success</li>
  <li class="step step-warning">Warning</li>
  <li class="step step-error">Error</li>
</ul>

Vertical Steps

  • Account setup
  • Personal info
  • Payment method
  • Confirmation
html 
1
2
3
4
5
6
<ul class="steps steps-vertical">
  <li class="step step-primary">Account setup</li>
  <li class="step step-primary">Personal info</li>
  <li class="step">Payment method</li>
  <li class="step">Confirmation</li>
</ul>

Steps with Description

  • Register
  • Verify Email
  • Choose Plan
  • Complete
Create account
Check your inbox
Select pricing
Get started
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="space-y-4">
  <div>
    <ul class="steps w-full">
      <li class="step step-primary">Register</li>
      <li class="step step-primary">Verify Email</li>
      <li class="step">Choose Plan</li>
      <li class="step">Complete</li>
    </ul>
    <div class="grid grid-cols-4 gap-4 mt-4 text-xs text-center">
      <div>Create account</div>
      <div>Check your inbox</div>
      <div>Select pricing</div>
      <div>Get started</div>
    </div>
  </div>
</div>

Responsive Steps

  • Order placed
  • Processing
  • Shipped
  • Delivered
html 
1
2
3
4
5
6
<ul class="steps w-full">
  <li class="step step-primary">Order placed</li>
  <li class="step step-primary">Processing</li>
  <li class="step">Shipped</li>
  <li class="step">Delivered</li>
</ul>