Glowup
DATA DISPLAY · 56 / 89
Stat
Stat — a Material You data display component for React Native and web.
󱀫
packages/ui/src/components/Stat.tsx
Live demo
󰄖
Monthly revenue
128,400
󰁝
12.5%
vs. last month
Properties
7 controls
Label
Value
Delta
Trend
Up
󰍝
Invert trend colors
Help Text
Icon
Usage
Stat.tsx
<Stat label="Monthly revenue" value="128,400" />
Variants
The states and shapes this component is meant to be used in.
Trends
Revenue
€18,420
󰁝
12.5%
Churn
2.4%
󰁅
0.8%
Active seats
128
󰁔
0
Inverted trend
`invertTrendColors` is for metrics where a fall is the good news.
Failed builds
3
󰁅
42%
p95 latency
240 ms
󰁝
18%
With icons and help
󰄖
Monthly recurring
€42,900
󰁝
6.1%
Excludes one-off invoices
󰠁
New workspaces
37
󰁝
4
Last 30 days
Bare
Components
87
Design tokens
42
Groups
9
On a panel
This quarter
󰄑
Orders
1,204
󰁝
9.2%
Refunds
18
󰁅
3.1%
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
9 on StatProps
Filter props
󰍉
label
required
string
What the number measures.
value
required
string
The number itself; pre-formatted by the caller.
delta
string
Signed change shown next to an up/down arrow, e.g. `"12.5%"`.
helpText
string
Extra context under the value.
icon
MaterialCommunityIconsGlyphs
invertTrendColors
boolean
Inverts the trend colors, for metrics where down is good.
style
StyleProp<ViewStyle>
testID
string
trend
"up" | "down" | "flat"
Direction of `delta`. Drives both the arrow and its color.
󰅁
Previous
Carousel
Next
Image
󰅂