Stat
Eğilim ve yardımcı bağlam içeren metrik gösterimi.
Stat.tsx
- Aylık Bileşen Kurulumu
- 48.240+%24.8 Geçen aya göre
Hedef Kota%84
- Ortalama Paket Boyutu
- 4.2 kB-1.1 kB Ağaç sallama (Tree-shaking) sonrası
Kurulum
shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:
$
npx shadcn@latest add https://ui.cagriozay.com.tr/r/stat.jsonKullanım Örneği
import { Stat } from "@/components/data-display/Stat"
<Stat label="Depolama" value="40 GB" progress={{ value: 40, max: 80 }} change="%12" trend="up" />Özellikler & Parametreler (API)
| Prop | Tür | Varsayılan | Açıklama |
|---|---|---|---|
| label | string | — | Definition term olarak metrik adı. |
| value | ReactNode | — | Metrik değeri. |
| change | string | — | Değişim değeri. |
| trend | "up" | "down" | "neutral" | "neutral" | Eğilim yönü. |
| trendLabel | string | — | Eğilimin erişilebilir açıklaması. |
| progress | { value: number; max?: number; label?: string } | — | Erişilebilir hedef ilerlemesi. |
| size | "sm" | "md" | "lg" | "md" | Tipografi ve boşluk ölçeği. |
| variant | "default" | "blueprint" | "subtle" | "sage" | "default" | Kart yüzeyi. |