Ir al contenido principal
Frutjam logo Frutjam
v2.2.1
Theme

Componente de pasos

Pasos CSS de Tailwind solo para CSS para asistentes de varios pasos e indicadores de progreso. Disposición horizontal y vertical, variantes de color por escalón. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.

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.

CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.

Class Tipo 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>