Stat
A key figure: a label, a value in tabular digits, a hint and a trend said in words.
Web only — React, from @krizaka/ui/stat. Stable: its API only changes in a major version.
When to use
- On a dashboard: revenue, views, supporters.
- In a row of a few figures that compare over the same period.
When not to use
Installation
Install
npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { Stat } from "@krizaka/ui/stat";Examples
Up
A rise, with its period.
Revenue
€4,812
+12 %vs last month
import { Stat } from "@krizaka/ui/stat";
export default function StatUp() {
return <Stat label="Revenue" value="€4,812" hint="vs last month" trend="up" trendLabel="+12 %" />;
}Down
A fall, said in words next to the arrow.
Revenue
€4,812
−4 %vs last month
import { Stat } from "@krizaka/ui/stat";
export default function StatDown() {
return <Stat label="Revenue" value="€4,812" hint="vs last month" trend="down" trendLabel="−4 %" />;
}Flat
No change.
Revenue
€4,812
0 %vs last month
import { Stat } from "@krizaka/ui/stat";
export default function StatFlat() {
return <Stat label="Revenue" value="€4,812" hint="vs last month" trend="flat" trendLabel="0 %" />;
}Plain
Label and value only.
Revenue
€4,812
import { Stat } from "@krizaka/ui/stat";
export default function StatPlain() {
return <Stat label="Revenue" value="€4,812" />;
}Row
A row of stats, as a dashboard shows them.
Views
12.4k
+8 %7 days
Supporters
318
+217 days
Payouts
€902
−3 %7 days
import { Stat } from "@krizaka/ui/stat";
// A row of stats, as a dashboard shows them.
export default function StatRow() {
return (
<div className="grid grid-cols-3 gap-8 rounded-xl border border-border-default bg-surface-1 p-6">
<Stat label="Views" value="12.4k" trend="up" trendLabel="+8 %" hint="7 days" />
<Stat label="Supporters" value="318" trend="up" trendLabel="+21" hint="7 days" />
<Stat label="Payouts" value="€902" trend="down" trendLabel="−3 %" hint="7 days" />
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | ReactNode | — | What the figure is ("Revenue"), above it. |
valuerequired | ReactNode | — | The figure, formatted by the app, in tabular digits. |
hint | ReactNode | — | A line under the value: the period, the comparison. |
trend | StatTrend | — | The direction of the change; its arrow is decorative. |
trendLabel | ReactNode | — | The change, in words, as read and shown (e.g. "+12 % vs last week") — the arrow alone says nothing. |
Accessibility
- The arrow is decorative;
trendLabelis read and shown. - Colour is never the only signal of the trend.
Best practices
- Format the value in the app (currency, compact numbers) with
@krizaka/intl. - Say the change in
trendLabel(“+12 %”) and the period inhint: the arrow alone says nothing.
Related components
Generated from the code of @krizaka/ui 2.0.0-beta.6: its meta.ts, its examples and its types.Edit this documentation on GitHub