Skip to content
oks-ui

Stat component

Stat is a KPI block — a label, a large value, an optional trend delta pill, an icon, and a sparkline. StatGroup lays a row of them out responsively with dividers.

Layout & Display9 propsAccessibility notes

Playground

Change a prop on the right and the preview updates. Switch to Code to copy what you see.

Recipes

Copy-paste patterns for the ways Stat actually gets used — each one a real, self-contained example.

KPI row

StatGroup lays out a responsive row of KPI blocks with dividers between them — a label, a big value, and a trend delta.

<StatGroup>
  <Stat label="Revenue" value="$48,200" delta={12.4} />
  <Stat label="Active users" value="2,318" delta={4.1} />
  <Stat label="Churn" value="1.9%" delta={-0.4} />
</StatGroup>

Trend direction

A numeric delta shows an up/down pill by sign; the direction is conveyed with an arrow and text, not colour alone.

<Stat label="Signups" value="1,204" delta={8.2} />
<Stat label="Refund rate" value="2.3%" delta={-1.1} />

With an icon

icon adds a leading glyph to reinforce what the metric measures; help adds a small hint.

<Stat
  label="Revenue"
  value="$48,200"
  delta={12.4}
  icon={<WalletIcon />}
  help="Net of refunds"
/>

Example

stat.tsx
<StatGroup>
  <Stat label="Revenue" value="$48,200" delta={12.4} />
  <Stat label="Active users" value="2,318" delta={4.1} />
  <Stat label="Churn" value="1.9%" delta={-0.4} />
</StatGroup>

Props

The full public API for Stat. Every prop is stable and intentionally typed.

Content

label

ReactNode

default: —

Required.

value

ReactNode

default: —

Required.

delta

ReactNode

default: —

Change indicator — shown as a coloured pill.

icon

ReactNode

default: —

In a rounded tile, top-right.

spark

ReactNode

default: —

A sparkline — pair with <Chart unstyled … />.

help

ReactNode

default: —

Small helper line under the value.

Appearance

trend

"up" | "down" | "flat"

default: —

Colour + arrow for delta.

size

"sm" | "md" | "lg"

default: md

Value size.

Layout & positioning

StatGroup columns

number

default: 4

Responsive grid — collapses to 2 / 1 columns.

Accessibility

  • The delta pill's direction is conveyed with text and an arrow glyph, not colour alone.
  • Each Stat renders its label and value as real text so screen readers announce the pair in order.
  • The sparkline is decorative and marked `aria-hidden`.

More in Layout & Display