Stat
statPresents a key metric with label, change, trend, and supporting context.
Usage
Basic usage
Input label and value to form a KPI indicator card.
Registered user
8,021
tsx
<Stat label="Registered User" value="8,021" />Chain trend
delta>=0 liter (text-primary)/<0 drop (text-danger), with deltaLabel Description caliber.
This month GMV
¥128,400
+12.5%Compared with last month
Refund Rate
2.3%
-4.1%Compared with last month
tsx
<>
<Stat label="This month GMV" value="¥128,400" delta={12.5} deltaLabel="Compared with last month" />
<Stat label="Refund rate" value="2.3%" delta={-4.1} deltaLabel="Compared with last month" />
</>With icon
The icon slot is rendered in the upper right corner, faded to the muted color.
This month GMV
¥128,400
+12.5%Compared with last month
tsx
<Stat
label="This month GMV"
value="¥128,400"
delta={12.5}
deltaLabel="Compared with last month"
icon={<Activity className="size-4" />}
/>Semantic icon base
tone colors only the icon base (subtle background plus semantic text); the value and trend colors never change. A row of identical KPI cards can be told apart by base color instead of stacking your own base over the component's. The default neutral is grey, and tone has no effect without an icon.
Subscribers
8,021
Devices online
1,284
Open alerts
7
Failed nodes
2
Pending sync
19
Archived
431
tsx
<div className="grid grid-cols-3 gap-4">
<Stat label="Subscribers" value="8,021" tone="brand" icon={<Users className="size-4" />} />
<Stat label="Devices online" value="1,284" tone="success" icon={<Activity className="size-4" />} />
<Stat label="Open alerts" value="7" tone="warning" icon={<Bell className="size-4" />} />
<Stat label="Failed nodes" value="2" tone="danger" icon={<AlertTriangle className="size-4" />} />
<Stat label="Pending sync" value="19" tone="info" icon={<RefreshCw className="size-4" />} />
<Stat label="Archived" value="431" tone="neutral" icon={<Archive className="size-4" />} />
</div>Footnote hint
A line description that has nothing to do with the trend is rendered with hint, which is independent of delta; when both exist at the same time, the trend line is at the top and the footnote is at the bottom. Note that deltaLabel is attached to delta and will not render if delta is not passed.
Number of questions in the question basket
12
Maximum of 200 questions
Examinees
38
+6.4%More advanced
2 people have not submitted their papers
tsx
<>
<Stat label="Number of questions in question basket" value="12" hint="Maximum 200 questions" />
<Stat label="Reference number of people" value="38" delta={6.4} deltaLabel="More qualified" hint="2 people have not submitted their papers" />
</>Grid layout
Multiple indicator cards can be directly assembled into a Kanban board using grid layout.
Registered user
8,021
+5.2%Compared with last month
Number of orders
1,204
-2.1%Compared with last month
tsx
<div className="grid grid-cols-2 gap-4">
<Stat label="Registered User" value="8,021" delta={5.2} deltaLabel="From last month" icon={<Users className="size-4" />} />
<Stat label="Number of orders" value="1,204" delta={-2.1} deltaLabel="Compared with previous month" icon={<ShoppingCart className="size-4" />} />
</div>When to use
Use Stat for a dashboard KPI card containing a label, formatted value, comparison trend, and optional icon or sparkline. Use Statistic for number formatting or countdown without a card, Chart for a full chart, or Meter for a bounded quantity.
Import
ts
import { Stat } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| delta | number | - | Percentage change; nonnegative is primary and negative is danger. Omission hides the trend. |
| tone | "neutral" | "brand" | "info" | "success" | "warning" | "danger" | "neutral" | Semantic color applied only to the `icon` base (subtle background plus semantic text). It never changes value or delta colors and has no effect without icon. |
| …HTMLAttributes | HTMLAttributes<HTMLDivElement> | - | Forwarded div attributes including className. |
Slots
| Slot | Type | Description |
|---|---|---|
| label* | ReactNode | Metric label. |
| value* | ReactNode | Consumer-formatted metric value. |
| deltaLabel | ReactNode | Comparison label rendered only with delta. |
| hint | ReactNode | Independent footnote below the trend. |
| icon | ReactNode | Corner icon. |
| chart | ReactNode | Graphic such as a KPI sparkline between value and delta. |
Pitfalls
- `deltaLabel` depends on `delta` and is silently omitted without it. Use
hintfor independent context. Development builds also emit a Chinese console warning for this misuse. - The exact warning is
"[hulian] Stat \u4f20\u4e86 deltaLabel \u4f46\u6ca1\u6709 delta\uff0c\u5b83\u4e0d\u4f1a\u88ab\u6e32\u67d3\uff1b\u82e5\u60f3\u8981\u4e0e\u8d8b\u52bf\u65e0\u5173\u7684\u6ce8\u811a\u8bf7\u7528 hint\u3002"("deltaLabel was supplied without delta; use hint for a trend-independent footnote"). - `tone` colors only the `icon` base. The
valueand the trend row keep their own colors (nonnegative delta stays primary, negative stays danger). Because the base is its only landing spot,tonedoes nothing wheniconis omitted; development builds warn about that instead of leaving you to guess. - Do not wrap `label` in `<span className="text-foreground">` to make it stand out.
labelalready usestext-foregroundas the card title, whilehintanddeltaLabelusetext-muted-foregroundas annotations. Dimminglabelby hand is equally wrong: it collapses the title back into the same tier as the footnote. - Omitting
deltahides the whole trend; its sign automatically determines direction and color. valueis not formatted. Pass ready content or use Statistic for grouping, precision, and affixes.
- The card ships with
shadow-sm+border-hairline(no visible outline in light, a 1px outline in dark) — the library's shared tier for elevated containers. To go back to a flat surface, override withclassName="shadow-none border-border". valuerenders at 30px and is truncated. That is one step larger than earlier versions, so long values are clipped sooner in narrow cards (< 200px). Give the card enough width, or move long values toStatistic's tighter layout.- The card has no hover elevation, because a Stat is not clickable on its own. When wrapping it in a link or button, put the hover feedback on that wrapper.
- The header row is always 32px tall (the size of the
iconbase), with or without `icon`. A row of KPI cards can freely mix cards with an icon and cards without one (for example when the top-right corner is reserved for an overlaid Sparkline); the value baseline and card height stay aligned.
Related
Statistic · Chart · Meter · Timeline · NumberTicker · WorldMap
Playground
This month GMV
¥128,400
+12%Compared with last month
<Stat label="This month GMV" value="¥128,400" delta={12} deltaLabel="Compared with last month" />