---
title: "Steps"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Steps for wizard flows, checkout funnels, and onboarding. Horizontal and vertical layouts with numbered icons and completed step states."
url: https://frutjam.com/pl/components/steps
---

# Steps Component

Komponenty kroków wizualizują wieloetapowe procesy, przewodniki lub przepływy pracy, wyświetlając kolejne etapy. Zbudowane z semantycznego kodu HTML i elastycznych układów, kroki pokazują postęp dzięki kreatorom konfiguracji, samouczkom i złożonym procedurom. System kroków Frutjam obsługuje wiele rozmiarów, kolorów, struktur i stanów ukończenia — idealnie nadaje się do kreatorów formularzy, przewodników instalacji i śledzenia postępu.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

| Klasa            | Typ         | Opis                                                 |
| ---------------- | ----------- | ---------------------------------------------------- |
| steps            | Opierać     | Kontener na uporządkowaną listę kroków               |
| step             | Modyfikator | Indywidualny element kroku z numerowanym znacznikiem |
| steps-horizontal | Modyfikator | Układ poziomy (domyślny)                             |
| steps-vertical   | Modyfikator | Pionowy układ skumulowany                            |
| step-primary     | Kolor       | Podstawowy znacznik koloru motywu                    |
| step-secondary   | Kolor       | Dodatkowy znacznik koloru motywu                     |
| step-accent      | Kolor       | Marker koloru motywu akcentującego                   |
| step-neutral     | Kolor       | Marker w neutralnym kolorze motywu                   |
| step-info        | Kolor       | Informacje semantyczny znacznik koloru               |
| step-success     | Kolor       | Semantyczny znacznik koloru sukcesu                  |
| step-warning     | Kolor       | Ostrzeżenie semantyczny znacznik koloru              |
| step-error       | Kolor       | Błąd semantycznego znacznika koloru                  |

## Podstawowe użycie

## Układ kroków

```html
<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>
```

## Kolory kroków

```html
<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>
```

## Pionowe stopnie

```html
<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>
```

## Kroki z opisem

```html
<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>
```

## Reagujące kroki

```html
<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>
```