---
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/tr/components/steps
---

# Steps Component

Adım bileşenleri, sıralı aşamaları görüntüleyerek çok adımlı süreçleri, kılavuzları veya iş akışlarını görselleştirir. Anlamsal HTML ve esnek düzenlerle oluşturulan adımlar, kurulum sihirbazları, öğreticiler ve karmaşık prosedürler aracılığıyla ilerlemeyi gösterir. Frutjam adım sistemi birden fazla boyutu, rengi, yapıyı ve tamamlanma durumunu destekler; form sihirbazları, kurulum kılavuzları ve ilerleme takibi için idealdir.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf            | Tip         | Tanım                                                  |
| ---------------- | ----------- | ------------------------------------------------------ |
| steps            | Temel       | Sıralı bir adım listesi için kapsayıcı                 |
| step             | Değiştirici | Numaralandırılmış işaretçiye sahip bireysel adım öğesi |
| steps-horizontal | Değiştirici | Yatay düzen (varsayılan)                               |
| steps-vertical   | Değiştirici | Dikey yığılmış düzen                                   |
| step-primary     | Renk        | Birincil tema renk işaretçisi                          |
| step-secondary   | Renk        | İkincil tema renk işaretçisi                           |
| step-accent      | Renk        | Vurgu teması renk işaretçisi                           |
| step-neutral     | Renk        | Nötr tema renk işaretçisi                              |
| step-info        | Renk        | Bilgi anlamsal renk işaretçisi                         |
| step-success     | Renk        | Başarı anlamsal renk işaretçisi                        |
| step-warning     | Renk        | Uyarı anlamsal renk işaretçisi                         |
| step-error       | Renk        | Hata anlamsal renk işaretçisi                          |

## Temel Kullanım

## Adım Düzeni

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

## Adım Renkleri

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

## Dikey Adımlar

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

## Açıklamalı Adımlar

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

## Duyarlı Adımlar

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