---
title: "Stat Card"
description: "Etiketi ve önceki döneme göre değişimiyle bir metrik."
---

<Callout type="info" title="Ne zaman kullanılır">
Paneller ve analiz ekranlarının üst kısmı. Bir satırda üç veya dört tane.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/stat-card
```

Registry tanımı yoksa önce [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation) adımlarını tamamlayın.

## Örnekler

### Metrik satırı

Düşüşün iyi olduğu metriklerde invertChange azalmayı yeşil gösterir.

**Örnek: Metrik satırı** (`stat-card/row`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/stat-card/row?align=stretch)

```tsx
import { StatCard } from "@/components/ikas/stat-card"
import { Layout } from "@/components/ikas/layout"

export default function StatCardRow() {
  return (
    <Layout columns="third">
      <StatCard label="Gelir" value="₺184.320" change={12.4} changeLabel="önceki 30 güne göre" />
      <StatCard label="Siparişler" value="1.208" change={-3.1} changeLabel="önceki 30 güne göre" />
      <StatCard label="İade oranı" value="1,8%" change={-0.6} invertChange changeLabel="önceki 30 güne göre" />
    </Layout>
  )
}
```

## API

### `StatCard`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `label` (zorunlu) | `React.ReactNode` | - | Neyin ölçüldüğü. |
| `value` (zorunlu) | `React.ReactNode` | - | Önceden biçimlendirilmiş değer. tr-TR ile Intl.NumberFormat kullanın. |
| `change` | `number` | - | Yüzde değişim, örn. 12.4. |
| `invertChange` | `boolean` | `false` | Düşüşleri olumlu kabul eder. |
| `changeLabel` | `React.ReactNode` | - | Karşılaştırma dönemi. |
| `footer` | `React.ReactNode` | - | Sparkline veya bağlantı için alan. |