---
title: "Timeline"
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 Timeline for chronological events, milestones, and process steps. Vertical and horizontal layouts with icons and connectors for history UIs."
url: https://frutjam.com/tr/components/timeline
---

# Timeline Component

Zaman çizelgesi bileşenleri bir dizi olayı, dönüm noktasını veya anlatı ilerlemesini kronolojik sırayla görüntüler. Anlamsal HTML ile oluşturulan zaman çizelgeleri, kullanıcıların tarihsel ilerlemeyi ve proje aşamalarını anlamalarına yardımcı olur. Frutjam zaman çizelgesi sistemi birden fazla yönü, rengi ve öğe stilini destekler; proje geçmişi, sürüm notları ve yolculuk haritaları 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                                                                   |
| ------------------- | ----------- | ----------------------------------------------------------------------- |
| timeline            | Temel       | Kronolojik olayların sıralı listesi                                     |
| timeline-item       | Değiştirici | Bireysel olay satırı — her `<li>`'e yerleştirin                         |
| timeline-start      | Değiştirici | Zaman çizelgesi ekseninin öncesine yerleştirilen içerik                 |
| timeline-middle     | Değiştirici | Zaman çizelgesi ekseninde ortalanmış nokta                              |
| timeline-end        | Değiştirici | Zaman çizelgesi ekseninden sonra yerleştirilen içerik                   |
| timeline-horizontal | Değiştirici | Yatay düzen                                                             |
| timeline-vertical   | Değiştirici | Dikey düzen (varsayılan)                                                |
| timeline-snap-start | Değiştirici | Başlangıç ​​sütununu gizler; nokta sol kenara hizalanır                 |
| timeline-snap-end   | Değiştirici | Son sütunu gizler; nokta sağ kenara hizalanır                           |
| timeline-primary    | Renk        | Ana renk noktası ve bağlayıcı — `timeline-item`'e yerleştirin           |
| timeline-secondary  | Renk        | İkincil renk noktası ve bağlayıcı — `timeline-item`'e yerleştirin       |
| timeline-accent     | Renk        | Vurgu renkli nokta ve bağlayıcı — `timeline-item`'e yerleştirin         |
| timeline-neutral    | Renk        | Nötr renkli nokta ve bağlayıcı — `timeline-item`'e yerleştirin          |
| timeline-info       | Renk        | Bilgi renkli nokta ve bağlayıcı — `timeline-item`'e yerleştirin         |
| timeline-success    | Renk        | Başarılı renkli nokta ve bağlayıcı — `timeline-item`'e yerleştirin      |
| timeline-warning    | Renk        | Uyarı renkli noktası ve bağlayıcı — `timeline-item` üzerine yerleştirin |
| timeline-error      | Renk        | Renkli nokta ve bağlayıcı hatası — `timeline-item`'e yerleştirin        |

## Temel Kullanım

## Renklerle Zaman Çizelgesi

Noktasını ve ondan çıkan bağlayıcı çizgiyi renklendirmek için her `zaman çizelgesi öğesine` bir renk değiştirici ekleyin.

```html
<ul class="timeline timeline-vertical">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start text-sm opacity-60">Step 1</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Primary</div></div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start text-sm opacity-60">Step 2</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Secondary</div></div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start text-sm opacity-60">Step 3</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Success</div></div>
  </li>
  <li class="timeline-item timeline-warning">
    <div class="timeline-start text-sm opacity-60">Step 4</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Warning</div></div>
  </li>
  <li class="timeline-item timeline-error">
    <div class="timeline-start text-sm opacity-60">Step 5</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Error</div></div>
  </li>
</ul>
```

## Alternatif Taraflar

Zikzak bir düzen oluşturmak için her öğedeki içeriği `zaman çizelgesi-başlangıç` ve `zaman çizelgesi-bitiş` arasında değiştirin.

```html
<ul class="timeline timeline-vertical">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start">
      <div class="font-semibold">Design phase</div>
      <div class="text-sm opacity-60">Jan 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Development</div>
      <div class="text-sm opacity-60">Mar 2024</div>
    </div>
  </li>
  <li class="timeline-item timeline-accent">
    <div class="timeline-start">
      <div class="font-semibold">Testing</div>
      <div class="text-sm opacity-60">May 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Launch</div>
      <div class="text-sm opacity-60">Jun 2024</div>
    </div>
  </li>
</ul>
```

## İki Tonlu Konektörler

Her öğenin bağlantı çizgisi, rengini devralır ve farklı renkli adımlar arasında kusursuz geçişler oluşturur.

```html
<ul class="timeline timeline-vertical timeline-snap-start">
  <li class="timeline-item timeline-info">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Planned</div>
      <div class="text-sm opacity-60">Backlog item created</div>
    </div>
  </li>
  <li class="timeline-item timeline-primary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">In Progress</div>
      <div class="text-sm opacity-60">Development started</div>
    </div>
  </li>
  <li class="timeline-item timeline-warning">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">In Review</div>
      <div class="text-sm opacity-60">Awaiting approval</div>
    </div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Done</div>
      <div class="text-sm opacity-60">Shipped to production</div>
    </div>
  </li>
</ul>
```

## Yalnızca Başlangıç ​​Tarafı

Her şeyi eksenin soluna itmek için içeriği yalnızca `timeline-start`'a boş bir `timeline-end` ile yerleştirin.

```html
<ul class="timeline timeline-vertical timeline-snap-end">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start">
      <div class="font-semibold">Requirements gathered</div>
      <div class="text-sm opacity-60">Jan 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start">
      <div class="font-semibold">Prototype built</div>
      <div class="text-sm opacity-60">Feb 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start">
      <div class="font-semibold">Shipped</div>
      <div class="text-sm opacity-60">Mar 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
</ul>
```

## Yalnızca Uç Taraf

Tüm içerik sağda olacak şekilde noktayı sol kenara itmek için `timeline-snap-start` komutunu kullanın.

```html
<ul class="timeline timeline-vertical timeline-snap-start">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Launched beta</div>
      <div class="text-sm opacity-60">February 2024</div>
    </div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Public release</div>
      <div class="text-sm opacity-60">April 2024</div>
    </div>
  </li>
</ul>
```

## Zengin Kart İçeriği

Her zaman çizelgesi etkinliğine kart benzeri bir görünüm kazandırmak için içeriği bir `kenarlık yuvarlatılmış kutu p-3` bloğuna sarın.

```html
<ul class="timeline timeline-vertical timeline-snap-start">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="border rounded-box p-3 mb-2">
        <div class="text-xs opacity-60 mb-1">Jan 15, 2024</div>
        <div class="font-semibold">Project Kickoff</div>
        <p class="text-sm opacity-70 mt-1">Team assembled, goals defined, and roadmap approved by stakeholders.</p>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="border rounded-box p-3 mb-2">
        <div class="text-xs opacity-60 mb-1">Mar 1, 2024</div>
        <div class="font-semibold">Alpha Released</div>
        <p class="text-sm opacity-70 mt-1">Internal testing began with 12 pilot users across 3 departments.</p>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="border rounded-box p-3 mb-2">
        <div class="text-xs opacity-60 mb-1">Jun 10, 2024</div>
        <div class="font-semibold">v1.0 General Availability</div>
        <p class="text-sm opacity-70 mt-1">Public launch with full documentation, support, and SLA guarantees.</p>
      </div>
    </div>
  </li>
</ul>
```

## Hızlı Başlangıç

Başlangıç ​​sütununu gizlemek ve noktayı sol kenara hizalamak için listede `timeline-snap-start` komutunu kullanın.

```html
<ul class="timeline timeline-vertical timeline-snap-start">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Launched beta</div>
      <div class="text-sm opacity-60">February 2024</div>
    </div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Public release</div>
      <div class="text-sm opacity-60">April 2024</div>
    </div>
  </li>
</ul>
```

## Yapış Sonu

Bitiş sütununu gizlemek ve noktayı sağ kenara hizalamak için listede `timeline-snap-end` komutunu kullanın.

```html
<ul class="timeline timeline-vertical timeline-snap-end">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start">
      <div class="font-semibold">Launched beta</div>
      <div class="text-sm opacity-60">February 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start">
      <div class="font-semibold">Public release</div>
      <div class="text-sm opacity-60">April 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
</ul>
```