Beautiful Charts
Get Pro

KPI stripFree

How's the week, in four numbers?

npx shadcn@latest add https://beautifulcharts.dev/r/kpi-strip.json

Code

"use client";

import { KpiStripBlock, type KpiStripItem } from "@/components/beautiful-charts/blocks/instrument/kpi-strip";

// KpiStripItem = Pick<KpiStatProps, "title" | "value" | "previous" | "previousLabel" | "target" | "trend" | "polarity" | "valueFormatter" | "unit">
const rows: KpiStripItem[] = [
  // your rows; a missing value is null and stays a gap
];

// The stats and copy recompute from your rows. Leave data out to see the sample.
export function Dashboard() {
  return <KpiStripBlock data={rows} />;
}

Props

  • data

    KpiStripItem[]

    Your rows (KpiStripItem = Pick<KpiStatProps, "title" | "value" | "previous" | "previousLabel" | "target" | "trend" | "polarity" | "valueFormatter" | "unit">). Missing values are null and stay gaps; with no rows every stat shows a dash. Leave it out to see the sample.

Every kpi stat prop works too, so you can restyle it without touching the source.

Accessibility, keyboard and motion

Pointer
Not interactive.
Keyboard
Not focusable: there's nothing to move between.
Screen readers
A labelled group: the value, its change in words and the target are read as one sentence.
Motion
The value rolls in digit by digit, the trend line draws, then the change fades in. With reduced motion it appears settled at once.

Related