Stat
KPI display. A numeric delta renders +n % / −n % with an arrow; pass an object for a
custom delta value/direction.
Revenue128 400 Kč+12.5%
Churn2.1 %-0.4%
Orders1 203+38 today
import { Stat } from '@gg-software/ui';
<Stat label="Revenue" value="128 400 Kč" delta={12.5} />
<Stat label="Churn" value="2.1 %" delta={-0.4} />
<Stat label="Orders" value="1 203" delta={{ value: '+38 today', direction: 'up' }} icon="🛒" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
label* | ReactNode | — | |
value* | ReactNode | — | |
delta | StatDelta | — | a number renders "+n%"/"-n%" with an arrow; an object lets you customise |
icon | ReactNode | — | |
className | string | — |
* required · generated from packages/ui/src/display/Stat/Stat.tsx
Types
type StatDelta = number | { value: ReactNode; direction: 'up' | 'down' };