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.
<Stat label="Registered User" value="8,021" />Chain trend
delta>=0 liter (text-primary)/<0 drop (text-danger), with deltaLabel Description caliber.
<>
<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.
<Stat
label="This month GMV"
value="¥128,400"
delta={12.5}
deltaLabel="Compared with last month"
icon={<Activity className="size-4" />}
/>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.
<>
<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.
<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
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. |
| …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"). - 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.
Related
Statistic · Chart · Meter · Timeline · NumberTicker · WorldMap
Playground
<Stat label="This month GMV" value="¥128,400" delta={12} deltaLabel="Compared with last month" />