Stat / KPI

KPI tile: label, big value, change vs. previous period, optional sparkline.

Import

import { Stat } from '@marbleui/ui'

Props

<Stat>

Prop	Type	Default	Description
label *required	`ReactNode`	`—`
value *required	`ReactNode`	`—`
className	`string`	`—`
delta	`number`	`—`	e.g. 12.5 → "+12.5%". Positive is good unless `invert`.
deltaLabel	`ReactNode`	`'vs last month'`
icon	`ReactNode`	`—`
invert	`boolean`	`—`
trend	`number[]`	`—`	Small trend line: list of numbers.
variant	`'card' \| 'plain'`	`'card'`

Usage notes

KPI tile with a label, a large value, an optional change figure and sparkline. For arbitrary grouped content use Card; for full charts use the chart components.

<Stat label="Revenue" value="$48,210" delta={12.4} trend={[12, 18, 15, 22, 28, 31]} />
<Stat label="Churn" value="2.1%" delta={0.6} invert />

delta is a number rendered as a percentage with an arrow (12.4 becomes “↑ 12.4%”). Positive is shown as good unless invert is set, which is right for metrics like churn.
deltaLabel defaults to “vs last month”. trend is a list of numbers drawn as a sparkline that is hidden from assistive tech, so the value and delta must carry the meaning.
variant="plain" drops the card border, for use inside your own container.

Example source · show

import { Stat } from './stat'

export const styles = {
  Cards: () => (
    <div className="grid w-[40rem] grid-cols-3 gap-3">
      <Stat label="Revenue" value="$48,210" delta={12.4} trend={[12, 18, 15, 22, 21, 28, 31]} />
      <Stat label="Active users" value="3,842" delta={4.1} trend={[30, 28, 31, 33, 32, 36, 37]} />
      <Stat label="Churn" value="2.1%" delta={0.6} invert trend={[1.4, 1.6, 1.5, 1.9, 2.0, 2.1, 2.1]} />
    </div>
  ),
  Plain: () => (
    <div className="flex w-[36rem] divide-x divide-border rounded-xl border border-border bg-surface">
      <Stat variant="plain" className="flex-1 p-4" label="Orders" value="1,204" delta={8} />
      <Stat variant="plain" className="flex-1 p-4" label="Refunds" value="18" delta={-25} invert />
      <Stat variant="plain" className="flex-1 p-4" label="Avg. order" value="$62.40" delta={-3.2} />
    </div>
  ),
}

Source: packages/ui/src/stat/stat.tsx

Catalog