Component

Stat

A labeled number: a small uppercase caption, a large value, and an optional trend line colored to match whether it moved up, down, or held steady.

The primitive

Balance

$4,280.00+2.4% this month

stat.tsx

<NativeStat label="Balance" value="$4,280.00" sublabel="+2.4% this month" trend="up" />

Example

A row of stats summarizing an account at the top of a dashboard, each one reading independently at a glance.

Balance

$4,280.00+2.4%

Spent

$1,120.00-0.8%

stat-example.tsx

<NativeStat label="Balance" value="$4,280.00" sublabel="+2.4%" trend="up" />
<NativeStat label="Spent" value="$1,120.00" sublabel="-0.8%" trend="down" />

Capabilities

Prop	Type	Description
labelrequired	string	—
valuerequired	string \| number	—
sublabel	string	Optional sub-label below value (e.g. "+2.4%")
trend	"up" \| "down" \| "neutral"	Trend coloring for sublabel
icon	React.ReactNode	Icon shown before label
className	string	—