Patterns
StatCard
Canonical dashboard metric tile with icon, trend, tone, and layout variants.
The canonical dashboard metric tile — one component for every stat. It supports an optional leading icon, a trend indicator (up/green or down/red), a semantic tone tint, and inline / valueFirst layout variants, so compact colored tiles and rich trend cards all share a single source.
Import
import { StatCard } from "@yuhuanowo/yunui/patterns";
Basic
The icon prop takes a Lucide component (a function), which can't cross the server→client boundary in MDX, so the example below is rendered from a small client wrapper.
StatCard
4.2%
Balance
$1,250
Layout variants
inline puts the icon and label on one row with the value beneath, while valueFirst leads with the big number. Both also accept a tone for a semantic color tint.
Variants
Pending
12
248
Approved
Rejected
3
Last 24h
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | |
| compact | boolean | false | Compact surface: the lighter `card p-4` tile instead of `stat-card p-5` (matches dense admin stat grids). |
| delay | number | 0 | Stagger entrance delay in ms. |
| icon | ElementType | — | Optional leading icon component (e.g. a Lucide icon). |
| inline | boolean | false | Compact layout: icon + label on one row, value below (admin insights style). |
| label* | string | — | Metric name. |
| subtext | ReactNode | — | Optional supporting line under the value. |
| tone | string | — | Semantic color tint for the card + value (amber/emerald/blue/red/purple). |
| trend | { value: number; positive: boolean; } | — | Optional trend indicator: percent `value` plus whether it's `positive` (up/green) or down/red. |
| value* | ReactNode | — | The metric value (string, number, or node). |
| valueFirst | boolean | false | Value-first layout: big number on top, label beneath (analytics / admin stats style). |