Passer au contenu principal
Frutjam logo Frutjam
v2.2.2
Theme

Steps Component

CSS-only Tailwind CSS steps for multi-step wizards and progress indicators. Horizontal and vertical layout, color variants per step. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

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 uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

Classe Taper Description
stepsBaseContainer for an ordered list of steps
stepModificateurIndividual step item with a numbered marker
steps-horizontalModificateurDisposition horizontale (par défaut)
steps-verticalModificateurDisposition empilée verticale
step-primaryCouleurPrimary theme color marker
step-secondaryCouleurSecondary theme color marker
step-accentCouleurAccent theme color marker
step-neutralCouleurNeutral theme color marker
step-infoCouleurInfo semantic color marker
step-successCouleurSuccess semantic color marker
step-warningCouleurWarning semantic color marker
step-errorCouleurError semantic color marker

Utilisation de base

  • 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>