Data display
Statistic / metric cards
A card that shows one derived reading
Area40px²0%8 × 5
Readings3one reading each, derived on render
Area 40 px² · trend from 40 px²
Usage
import { StatCard } from "@gpuixui/data";
<StatCard label="Area" value={`${width * height}`} unit="px²" />;API
StatCard
| Prop | Type | Default | Consequence |
|---|---|---|---|
label | string | — | what the reading measures |
value | ReactNode | — | the reading, already rendered by the caller |
unit | string | — | the unit, beside the reading |
hint | ReactNode | — | a line under the reading |
trend | StatTrend | — | the movement of the reading; a null a store wrote for an absent trend paints no trend |
className | string | — | joined after the recipe |
StatTrend
| Field | Type | Consequence |
|---|---|---|
direction | "up" | "down" | "flat" | which way the reading moved; it chooses the status tone's readable role |
text | string | null | the trend's own words, e.g. +12%; a nullish or blank one paints no words |
Edit this page on GitHubpackages/data/docs/stat-card.mdx