Stat Card
A metric display card. Composes a label, a large value, an optional trend indicator, and an optional icon.
Molecule
Card · Badge · Icon
When To Use
- Use Stat Card when information needs to be scanned quickly and compared across multiple rows, cards, or values.
- Choose the example that best matches whether the user is browsing, monitoring, or drilling into structured data.
- Lean on these patterns when you want consistent spacing and hierarchy before tuning the visual treatment.
When Not To Use
- Do not use a dense data pattern when the primary task is storytelling, onboarding, or one-off explanation.
- Do not flatten nuanced data into a compact summary card if the user still needs the underlying structure to make a decision.
Accessibility Notes
- Preserve table semantics for tabular data and avoid flattening structured information into generic divs.
- Use clear headings, summaries, and labels so assistive technologies can announce the data in context.
- Do not rely on color alone to communicate trend, status, or state in charts and metric cards.
Key Props / API
Props
label, value, trend, direction, icon, className
Example Code
import { StatCard } from "@hilum/ui"
<StatCard label="Total users" value="24,521" />Stat Card · Basic
Default
Label and value only
Total users
24,521
Stat Card · Trend
With trend
up · down · neutral directions
Monthly revenue
$48,200
+12.5% vs last month
Churn rate
3.2%
-0.4% vs last month
Stat Card · Icon
With icon
Lucide icon in top-right corner
Active users
8,340
+5.1% this week
Orders
1,204
-2.3% this week
Stat Card · Grid
Dashboard grid
Four cards in a 2×2 layout
Total users
24,521
+8.1%
Revenue
$84,200
+12.5%
Orders
1,204
-2.3%
Uptime
99.9%
stable