Stat Card

Kartu metrik/KPI: label, angka besar, ikon ber-aksen, dan indikator tren naik/turun untuk dashboard.

import { StatCard } from "@naraya/ui";

Examples

Grid KPI

Total Kunjungan

48.2K

+12.5%vs bulan lalu

Transaksi

1.284

+3.1%minggu ini

Storage

82%

-4%setelah cleanup

Skor AI

9,1

stabil

<StatCard
  tone="primary"
  icon={<Globe size={20} />}
  label="Total Kunjungan"
  value="48.2K"
  trend="up"
  trendValue="+12.5%"
  hint="vs bulan lalu"
/>

Tanpa ikon / tanpa tren

Pengguna Aktif

3.910

Rata-rata Sesi

4m 12s

7 hari terakhir

<StatCard label="Pengguna Aktif" value="3.910" />
<StatCard label="Rata-rata Sesi" value="4m 12s" hint="7 hari terakhir" />

Props

Prop	Type	Default	Description
label*	`ReactNode`	—	Label kecil di atas angka.
value*	`ReactNode`	—	Nilai utama (angka besar).
icon	`ReactNode`	—	Ikon di kotak ber-aksen.
tone	`"primary" \| "accent" \| "info" \| "success" \| "warning" \| "error"`	`"primary"`	Warna kotak ikon.
trend	`"up" \| "down" \| "neutral"`	—	Arah tren — pilih panah & warna delta.
trendValue	`ReactNode`	—	Teks delta, mis. "+12.5%".
hint	`ReactNode`	—	Teks sekunder, mis. "vs bulan lalu".

Tokens Used

--bg-surface

Latar kartu

--border-subtle

Border kartu

--color-<tone>

Aksen kotak ikon per tone

--color-success / error

Warna tren naik / turun

--text-main / --text-muted

Value vs label/hint

Stat Card

Examples

Props

Tokens Used

Accessibility

Related