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.
- 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
<Stat label="This month GMV" value="¥128,400" delta={12} deltaLabel="Compared with last month" />