---
title: "Stat"
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 Stat for dashboards and KPI displays. Titles, values, trend indicators, and icon support for clear metric and analytics presentation."
url: https://frutjam.com/tr/components/stat
---

# Stat Component

İstatistik bileşenleri temel metrikleri ve sayısal verileri açık ve düzenli bir biçimde görüntüler. Anlamsal HTML ve esnek düzenlerle oluşturulan istatistikler, önemli iş ölçümlerini ve analizlerini iletir. Frutjam istatistik sistemi birden fazla düzenlemeyi ve stili destekler; gösterge tabloları, performans raporları ve veri özetleri 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                                                        |
| ---------------- | ----------- | ------------------------------------------------------------ |
| stats            | Temel       | Bir veya daha fazla istatistik öğesi için kapsayıcı          |
| stat             | Değiştirici | Başlığı, değeri ve açıklaması olan bireysel istatistik öğesi |
| stat-title       | Değiştirici | İstatistik değerinin üzerindeki etiket                       |
| stat-value       | Değiştirici | Büyük birincil sayısal veya metin değeri                     |
| stat-desc        | Değiştirici | Değerin altındaki ek açıklama                                |
| stat-figure      | Değiştirici | İstatistiğin yanında simge veya avatar                       |
| stats-horizontal | Değiştirici | İstatistik öğelerini yan yana düzenler (varsayılan)          |
| stats-vertical   | Değiştirici | İstatistik öğelerini dikey olarak yığınlar                   |
| stat-primary     | Renk        | İstatistik değeri için birincil tema rengi                   |
| stat-secondary   | Renk        | İstatistik değeri için ikincil tema rengi                    |
| stat-accent      | Renk        | İstatistik değeri için vurgu teması rengi                    |
| stat-neutral     | Renk        | İstatistik değeri için nötr tema rengi                       |
| stat-info        | Renk        | İstatistik değeri için bilgi anlamsal rengi                  |
| stat-success     | Renk        | İstatistik değeri için başarı anlamsal rengi                 |
| stat-warning     | Renk        | İstatistik değeri için uyarı anlamsal rengi                  |
| stat-error       | Renk        | İstatistik değeri için hata anlamsal rengi                   |

## Temel Kullanım

## Çoklu İstatistikler

```html
<div class="stats shadow">
  <div class="stat place-items-center">
    <div class="stat-title">Total Page Views</div>
    <div class="stat-value">89,400</div>
    <div class="stat-desc">21% more than last month</div>
  </div>

  <div class="stat place-items-center">
    <div class="stat-title">Total Users</div>
    <div class="stat-value">4,200</div>
    <div class="stat-desc">↗︎ 400 (22%)</div>
  </div>

  <div class="stat place-items-center">
    <div class="stat-title">New Registers</div>
    <div class="stat-value">1,200</div>
    <div class="stat-desc">↗︎ 90 (14%)</div>
  </div>
</div>
```

## Simgelerle İstatistikler

```html
<div class="stats shadow">
  <div class="stat">
    <div class="stat-figure text-primary">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
    </div>
    <div class="stat-title">Page Views</div>
    <div class="stat-value text-primary">40.5K</div>
    <div class="stat-desc">↗︎ 21% from last month</div>
  </div>

  <div class="stat">
    <div class="stat-figure text-secondary">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
    </div>
    <div class="stat-title">Users</div>
    <div class="stat-value text-secondary">3,200</div>
    <div class="stat-desc">↗︎ 400 from last month</div>
  </div>
</div>
```

## Yatay İstatistikler

```html
<div class="stats stats-horizontal shadow">
  <div class="stat">
    <div class="stat-title">Downloads</div>
    <div class="stat-value">31K</div>
    <div class="stat-desc">Jan 1st - Feb 1st</div>
  </div>

  <div class="stat">
    <div class="stat-title">New Users</div>
    <div class="stat-value">4,200</div>
    <div class="stat-desc">↗︎ 400 (22%)</div>
  </div>

  <div class="stat">
    <div class="stat-title">New Registers</div>
    <div class="stat-value">1,200</div>
    <div class="stat-desc">↗︎ 90 (14%)</div>
  </div>
</div>
```

## Dikey İstatistikler

```html
<div class="stats stats-vertical shadow">
  <div class="stat">
    <div class="stat-title">Downloads</div>
    <div class="stat-value">31K</div>
    <div class="stat-desc">Jan 1st - Feb 1st</div>
  </div>

  <div class="stat">
    <div class="stat-title">New Users</div>
    <div class="stat-value">4,200</div>
    <div class="stat-desc">↗︎ 400 (22%)</div>
  </div>

  <div class="stat">
    <div class="stat-title">New Registers</div>
    <div class="stat-value">1,200</div>
    <div class="stat-desc">↗︎ 90 (14%)</div>
  </div>
</div>
```

## Renk Çeşitleri

```html
<div class="stats shadow">
  <div class="stat stat-primary">
    <div class="stat-title">Primary</div>
    <div class="stat-value">12.4K</div>
    <div class="stat-desc">↗︎ 8% this week</div>
  </div>

  <div class="stat stat-secondary">
    <div class="stat-title">Secondary</div>
    <div class="stat-value">3,800</div>
    <div class="stat-desc">↗︎ 12% this week</div>
  </div>

  <div class="stat stat-accent">
    <div class="stat-title">Accent</div>
    <div class="stat-value">960</div>
    <div class="stat-desc">↗︎ 5% this week</div>
  </div>

  <div class="stat stat-neutral">
    <div class="stat-title">Neutral</div>
    <div class="stat-value">540</div>
    <div class="stat-desc">No change</div>
  </div>
</div>
```

## Anlamsal Renk Çeşitleri

```html
<div class="stats shadow">
  <div class="stat stat-info">
    <div class="stat-title">Info</div>
    <div class="stat-value">1,024</div>
    <div class="stat-desc">Active sessions</div>
  </div>

  <div class="stat stat-success">
    <div class="stat-title">Success</div>
    <div class="stat-value">98.3%</div>
    <div class="stat-desc">Uptime this month</div>
  </div>

  <div class="stat stat-warning">
    <div class="stat-title">Warning</div>
    <div class="stat-value">42</div>
    <div class="stat-desc">Pending reviews</div>
  </div>

  <div class="stat stat-error">
    <div class="stat-title">Error</div>
    <div class="stat-value">7</div>
    <div class="stat-desc">Failed jobs today</div>
  </div>
</div>
```