---
title: "Step Kit"
description: "Adım bileşenlerinin ortak parçaları: işaret şekilleri, bağlantı çizgileri, kendini çizen onay ve ünlem işaretleri, birden çok adım atlarken zamanlama."
---

<Callout type="info" title="Ne zaman kullanılır">
Çoğu uygulama Step Kit'i doğrudan kullanmaz; [Steps](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/steps), [Progress Bar](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/progress-bar) ve [Launchpad](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/launchpad) onu içeride kullanır. İki durumda işinize yarar: uygulamanın tüm işaret şeklini kökte bir kez belirlemek (`StepMarkerProvider`) ve hazır bileşenlerin karşılamadığı kendi adım listenizi aynı görünümle çizmek.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/step-kit
```

Registry tanımı yoksa önce [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation) adımlarını tamamlayın. Steps, Progress Bar veya Launchpad kurduğunuzda Step Kit de birlikte gelir.

## Örnekler

### İşaret şeklini bir kez belirleyin

`StepMarkerProvider` içindeki tüm Steps, Launchpad ve segmentli Progress Bar'lar aynı şekli kullanır. Varsayılan `diamond`'dır. Canlı örnek için [Steps](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/steps) sayfasına bakın.

```tsx
import { StepMarkerProvider } from "@/components/ikas/step-kit"

export function Providers({ children }: { children: React.ReactNode }) {
  return <StepMarkerProvider shape="circle">{children}</StepMarkerProvider>
}
```

### Kendi adım listeniz

`StepMarker` bir adımın işaretidir: biten adım dolar ve onay işareti çizilir, mevcut adımın arkasında bir halka büyür, hatalı adım kırmızıya döner ve ünlem işareti alır. `StepConnector` iki adım arasındaki çizgidir. `useStepTravel`, birden çok adım atlandığında bağlantıların sırayla dolması için gecikmeleri hesaplar.

```tsx
"use client"

import { StepConnector, StepMarker, useStepTravel } from "@/components/ikas/step-kit"

const steps = ["Hesap", "Ürünler", "Yayın"]

export function SetupTrail({ current }: { current: number }) {
  const travel = useStepTravel(current)

  return (
    <ol className="flex items-center gap-2">
      {steps.map((label, i) => (
        <li key={label} className="flex items-center gap-2">
          <StepMarker
            index={i + 1}
            status={i < current ? "done" : i === current ? "current" : "upcoming"}
            delay={i === current ? travel.landing : travel.delay(i)}
          />
          <span className="text-sm">{label}</span>
          {i < steps.length - 1 && <StepConnector filled={i < current} delay={travel.delay(i)} className="w-8" />}
        </li>
      ))}
    </ol>
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- İşaret şeklini uygulamanın kökünde StepMarkerProvider ile bir kez verin.
- Hazır bileşen işinizi görüyorsa (Steps, Progress Bar, Launchpad) önce onu kullanın.
- Birden çok adım atlanabiliyorsa gecikmeleri useStepTravel ile hesaplayın.

**Yapmayın:**

- Her bileşene ayrı ayrı farklı bir shape vermeyin.
- Kendi onay veya ünlem animasyonunuzu yazmayın; CheckGlyph ve AlertGlyph'i kullanın.

## Erişilebilirlik

- İşaretler, bağlantılar ve glifler dekoratiftir (`aria-hidden`). Adımın durumunu metinle de verin: sıralı liste, mevcut adımda `aria-current="step"`, değişiklikler için bir `aria-live` bölgesi. Steps bunları hazır getirir.
- `prefers-reduced-motion` açıkken işaretler ve bağlantılar animasyonsuz değişir.

## API

### `StepMarker`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `status` (zorunlu) | `StepStatus` | - | upcoming, current, done, error veya blocked. |
| `index` | `number` | - | Adım bitmemişken gösterilen numara. size="sm" iken gizlenir. |
| `shape` | `StepMarkerShape` | - | diamond (varsayılan), circle, square veya pill. Verilmezse StepMarkerProvider'ınkini kullanır. |
| `size` | `"default" \| "sm"` | `"default"` | sm 18px'tir: kompakt adım göstergeleri ve checklist kutuları. |
| `delay` | `number` | `0` | Glif ve halka değişmeden önce beklenecek saniye; birden çok adım atlandığında sırayla yerine oturur. |

### `StepConnector`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `filled` (zorunlu) | `boolean` | - | Çizginin dolu olup olmadığı. Biten taraftan dolar, aynı yoldan boşalır. |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | horizontal veya vertical. |
| `delay` | `number` | `0` | Dolmadan veya boşalmadan önce beklenecek saniye. |

### `StepMarkerProvider`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `shape` (zorunlu) | `StepMarkerShape` | - | İçerideki tüm StepMarker, Steps, Launchpad ve segmentli ProgressBar'ların şekli. |
| `children` | `React.ReactNode` | - | Şeklin uygulanacağı ağaç. |

### `CheckGlyph` ve `AlertGlyph`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `className` | `string` | - | Boyut ve renk sınıfları. |
| `delay` | `number` | `0` | Çizilmeye başlamadan önce beklenecek saniye. |

`AlertGlyph` aynı prop'ları alır: önce ünlemin gövdesi çizilir, ardından nokta belirir.

### `useStepTravel(current)`

`current`'ın nereden geldiğini hatırlar ve iki değer döner: `delay(i)`, i. bağlantı veya adımdaki değişikliğin gecikmesi (saniye); `landing`, yeni mevcut adımın işaretinin gecikmesi. `forward` hareketin yönünü verir.