AppStats
A row of KPI stat cards: label, value, and an optional colored delta with a directional caret (increase / decrease / neutral). Two, three, or four columns. Presentational and theme-driven.
Revenue
$48.2k+12%
Active users
12,480+4%
Churn
1.8%-0.3%
Open tickets
370%
Installation
pnpm
pnpm dlx @hex-core/cli add app-statsVariant values
columnsCards per row on desktop.| Value | Description |
|---|---|
fourdefault | Four across. |
three | Three across. |
two | Two across. |
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
statsrequired | object | — | ReadonlyArray<{ label; value; change?; changeType?: 'increase'|'decrease'|'neutral'; icon? }>. The metric cards. changeType colors the delta and picks its caret. |
columns | enum | four | Card count per row on ≥lg: 'two', 'three', or 'four'. |
className | string | — | Additional classes applied to the root grid. |
AI Guidance
When to use
Use at the top of a dashboard to surface headline KPIs. Match the columns count to the number of stats. Set changeType so deltas read as good/bad at a glance.
When not to use
Don't use for a single metric (use plain text) or for time-series data (use a chart artifact). Don't pack more than four cards per row.
Common mistakes
- Relying on color alone for increase/decrease — the caret direction and the sign in the change text both encode it, so keep the sign (e.g. '-0.3%').
- Setting changeType='increase' for a metric where down is good (e.g. churn) — pick the type by sentiment, not arithmetic.
- Mismatched columns and stat count, leaving a ragged row.
Accessibility
Deltas don't rely on color alone: a directional caret plus the signed change text convey direction. Carets are aria-hidden. Values and labels are plain text, read in source order.
Related components
Token budget: 650
Verified against @hex-core/components@1.12.0