Stat
Stat shows one key number with its change and an optional small chart.
Numbers are formatted with the YugenProvider locale and shortened from 10,000 (12.9K). delta is a signed change shown as a percentage by default; goodDirection decides whether going up is good (green) or bad (red), and the direction is always spelled out for screen readers. chart takes a small chart, usually a Sparkline. StatTile in Yugen Labs is now Stat with a Sparkline drawn from trend.
Revenue
$128K
Increase+12.4%vs. last month
Orders
1,284
Increase+3.1%vs. last month
Return rate
2.1%
Decrease-0.4%vs. last month
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { Stat } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Active users
78.2K
Increase+13%vs. last month
Small chart & icon
chart puts a chart next to the number; icon sits before the label.
Medium
4,210
Large
4,210
Extra large
4,210
Size
medium 28px, large 40px, extra-large 68px. At most one extra-large number per screen.
Usage
Do
- Name the comparison period in deltaLabel (“vs last month”).
- Set goodDirection="down" for metrics where lower is better: error rate, wait time, cost.
- Use valueFormat with style currency / unit to get units right for the locale.
Don't
- Don't put more than 4–5 Stats in one row; people won't know where to look.
- Don't color a change that is neither good nor bad. Set goodDirection="neutral".
Props
| Prop · Type | Default | Description |
|---|---|---|
| labelReactNode | Default: — | Label in sentence case, without a colon. |
| valuenumber | string | Default: — | Numbers are formatted for the locale; strings are shown as they are. |
| valueFormatIntl.NumberFormatOptions | (value) => string | Default: compact from 10,000 | Number format. |
| deltanumber | Default: — | Signed change (0.124 = +12.4%). |
| deltaFormatIntl.NumberFormatOptions | (value) => string | Default: percent | Format of the delta. |
| deltaLabelReactNode | Default: — | Comparison period. |
| goodDirection"up" | "down" | "neutral" | Default: "up" | Which direction is good: sets the success / danger color. |
| size"medium" | "large" | "extra-large" | Default: "medium" | Number size 28 / 40 / 68px. The old value "hero" is deprecated (removed in 1.0). |
| iconReactNode | Default: — | Icon before the label. |
| chartReactNode | Default: — | Small chart next to the number, usually a Sparkline. |
| localestring | Default: — | Locale for Intl.NumberFormat; defaults to YugenProvider. |
Messages
Text built into the component: labels, aria-labels, screen reader announcements.
English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.
messages.stat
| Key · Type | Default (English) | messagesVi |
|---|---|---|
| increasestring Chữ ẩn đọc trước delta: chiều thay đổi. | Default (English)"Increase" | messagesVi"Tăng" |
| decreasestring | Default (English)"Decrease" | messagesVi"Giảm" |
| noChangestring | Default (English)"No change" | messagesVi"Không đổi" |