Stat row

Two to five key figures in one row separated by hairlines, collapsing to two columns and then one as the container narrows.

Use when: The opening summary of a report or dashboard: the two to five most important numbers. Give every figure a delta or a context line, and order them by importance.
Avoid when: More than five figures (use kpi grid), a single lead number (use big number with size: "hero"), or figures that need their history shown (use kpi grid, or variant: "tiles" with a trend).

Preview

Renewables supplied 31.7% of the world's electricity in 2024

Global electricity generation, 2024

Share from renewables

31.7%

+1.9 pts vs 2023

Solar generation, TWh

2,131

+29% vs 2023

Wind generation, TWh

2,494

+7.9% vs 2023

Share from all clean sources

40.9%

Above 40% for the first time since the 1940s

Source: Ember, Global Electricity Review 2025 · Figures are approximate, for illustration

import { StatRow } from "insightcharts";

export function Example() {
  return (
    <StatRow
      title="Renewables supplied 31.7% of the world's electricity in 2024"
      subtitle="Global electricity generation, 2024"
      items={[
        {
          value: 0.317,
          format: "percent",
          label: "Share from renewables",
          delta: "+1.9 pts",
          deltaLabel: "vs 2023",
        },
        {
          value: 2131,
          label: "Solar generation, TWh",
          delta: 0.29,
          deltaLabel: "vs 2023",
        },
        {
          value: 2494,
          label: "Wind generation, TWh",
          delta: 0.079,
          deltaLabel: "vs 2023",
        },
        {
          value: 0.409,
          format: "percent",
          label: "Share from all clean sources",
          context: "Above 40% for the first time since the 1940s",
        },
      ]}
      source="Ember, Global Electricity Review 2025"
      note="Figures are approximate, for illustration"
    />
  );
}

{
  "type": "stat-row",
  "title": "Renewables supplied 31.7% of the world's electricity in 2024",
  "subtitle": "Global electricity generation, 2024",
  "items": [
    {
      "value": 0.317,
      "format": "percent",
      "label": "Share from renewables",
      "delta": "+1.9 pts",
      "deltaLabel": "vs 2023"
    },
    {
      "value": 2131,
      "label": "Solar generation, TWh",
      "delta": 0.29,
      "deltaLabel": "vs 2023"
    },
    {
      "value": 2494,
      "label": "Wind generation, TWh",
      "delta": 0.079,
      "deltaLabel": "vs 2023"
    },
    {
      "value": 0.409,
      "format": "percent",
      "label": "Share from all clean sources",
      "context": "Above 40% for the first time since the 1940s"
    }
  ],
  "source": "Ember, Global Electricity Review 2025",
  "note": "Figures are approximate, for illustration"
}

Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.

Composition

Built from

The pieces stat row renders or expects in its slots.

Atoms

Big number

A featured statistic with its label, change and the context that gives it meaning.

Stat tile

A compact, bordered KPI tile: label, value, change against a baseline and an optional trend graphic.

Used in

3 templates use stat row.

Templates

A set of linked charts over one shared dataset that filter each other. It has a headline, a sentence of instructions with filter chips, a row of figures that recompute from the filtered rows, two to four charts and an optional detail table. It opens on selections the author chooses.

Executive brief

A one-page summary. It has a headline that states the main finding with its number, a deck, a row of three or four key figures, one hero chart with a takeaway callout, two smaller supporting exhibits, a short list of actions and a source note.

Visual essay

A long article read by scrolling. It has a headline, then an ordered list of blocks in a reading column, then a source note. The blocks are prose, figures, charts with a callout, scrolly sequences, pull quotes, stat rows, small multiples and chapter breaks. Exhibits can be wider than the column.

Installation

$ pnpm dlx shadcn@latest add @insightcharts/stat-row

The CLI copies the source into your project and needs the @insightcharts registry in components.json; see installation. With the package, import it by name:

import { StatRow } from "insightcharts";

Examples

Tiles with trends

Monthly active users

48.2K

+8.3%vs September

Median first-response time

2 h 14 min

−18%vs September

Net revenue retention

112%

Top quartile for the sector is 110%

Illustrative data

import { StatRow } from "insightcharts";

export function Example() {
  return (
    <StatRow
      variant="tiles"
      items={[
        {
          label: "Monthly active users",
          value: 48210,
          format: "compact",
          delta: 0.083,
          deltaLabel: "vs September",
          trend: [38.1, 39.4, 39, 40.8, 42.2, 41.9, 43.5, 44.1, 44.5, 46, 47.2, 48.2],
        },
        {
          label: "Median first-response time",
          value: "2 h 14 min",
          delta: -0.18,
          deltaLabel: "vs September",
          upIsGood: false,
          trend: [4.1, 3.9, 3.8, 3.2, 3.4, 2.9, 2.7, 2.4, 2.2],
        },
        {
          label: "Net revenue retention",
          value: 1.12,
          format: "percent",
          context: "Top quartile for the sector is 110%",
        },
      ]}
      note="Illustrative data"
    />
  );
}

{
  "type": "stat-row",
  "variant": "tiles",
  "items": [
    {
      "label": "Monthly active users",
      "value": 48210,
      "format": "compact",
      "delta": 0.083,
      "deltaLabel": "vs September",
      "trend": [38.1, 39.4, 39, 40.8, 42.2, 41.9, 43.5, 44.1, 44.5, 46, 47.2, 48.2]
    },
    {
      "label": "Median first-response time",
      "value": "2 h 14 min",
      "delta": -0.18,
      "deltaLabel": "vs September",
      "upIsGood": false,
      "trend": [4.1, 3.9, 3.8, 3.2, 3.4, 2.9, 2.7, 2.4, 2.2]
    },
    {
      "label": "Net revenue retention",
      "value": 1.12,
      "format": "percent",
      "context": "Top quartile for the sector is 110%"
    }
  ],
  "note": "Illustrative data"
}

Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.

Two figures

Households that could not cover a €500 bill

1 in 4

Without borrowing or selling something

Households in arrears on utility bills

6.8%

+0.4 pts vs 2022

Source: Eurostat, EU-SILC 2023 · Figures are approximate, for illustration

import { StatRow } from "insightcharts";

export function Example() {
  return (
    <StatRow
      items={[
        {
          value: "1 in 4",
          label: "Households that could not cover a €500 bill",
          context: "Without borrowing or selling something",
        },
        {
          value: 0.068,
          format: "percent",
          label: "Households in arrears on utility bills",
          delta: "+0.4 pts",
          deltaLabel: "vs 2022",
          upIsGood: false,
        },
      ]}
      source="Eurostat, EU-SILC 2023"
      note="Figures are approximate, for illustration"
    />
  );
}

{
  "type": "stat-row",
  "items": [
    {
      "value": "1 in 4",
      "label": "Households that could not cover a €500 bill",
      "context": "Without borrowing or selling something"
    },
    {
      "value": 0.068,
      "format": "percent",
      "label": "Households in arrears on utility bills",
      "delta": "+0.4 pts",
      "deltaLabel": "vs 2022",
      "upIsGood": false
    }
  ],
  "source": "Eurostat, EU-SILC 2023",
  "note": "Figures are approximate, for illustration"
}

Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.

Five figures

Visits

1.3M

+12% vs last month

Unique visitors

412K

+9% vs last month

Sign-ups

38.2K

+3.1% vs last month

Paid conversions

5.1K

−2.4% vs last month

Sign-up to paid

13.4%

−0.7 pts vs last month

Illustrative data

import { StatRow } from "insightcharts";

export function Example() {
  return (
    <StatRow
      format="compact"
      items={[
        { value: 1284000, label: "Visits", delta: 0.12, deltaLabel: "vs last month" },
        {
          value: 412000,
          label: "Unique visitors",
          delta: 0.09,
          deltaLabel: "vs last month",
        },
        { value: 38200, label: "Sign-ups", delta: 0.031, deltaLabel: "vs last month" },
        {
          value: 5140,
          label: "Paid conversions",
          delta: -0.024,
          deltaLabel: "vs last month",
        },
        {
          value: 0.134,
          format: "percent",
          label: "Sign-up to paid",
          delta: "−0.7 pts",
          deltaLabel: "vs last month",
        },
      ]}
      note="Illustrative data"
    />
  );
}

{
  "type": "stat-row",
  "format": "compact",
  "items": [
    {
      "value": 1284000,
      "label": "Visits",
      "delta": 0.12,
      "deltaLabel": "vs last month"
    },
    {
      "value": 412000,
      "label": "Unique visitors",
      "delta": 0.09,
      "deltaLabel": "vs last month"
    },
    {
      "value": 38200,
      "label": "Sign-ups",
      "delta": 0.031,
      "deltaLabel": "vs last month"
    },
    {
      "value": 5140,
      "label": "Paid conversions",
      "delta": -0.024,
      "deltaLabel": "vs last month"
    },
    {
      "value": 0.134,
      "format": "percent",
      "label": "Sign-up to paid",
      "delta": "−0.7 pts",
      "deltaLabel": "vs last month"
    }
  ],
  "note": "Illustrative data"
}

Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.

Props

Prop	Type	Default	Description
itemsrequired	{ value, label, context?, delta?, deltaLabel?, upIsGood?, format?, trend? }[]		Two to five figures, most important first. Each takes the props of `big-number` (or `stat-tile` when `variant` is `tiles`).
variant	"plain" \| "tiles"	"plain"	Open figures divided by hairlines, or bordered tiles that can carry a `trend`.
format	FormatSpec	"auto"	Number format for every figure that does not set its own.
title	string		The main fact with its number, or a plain label.
subtitle	string		Population and period the figures share.
source	string		Shown under the row as "Source: ...".
note	string		Method note or caveat.
theme	ThemeInput		Theme override, passed on to every figure.
mode	"auto" \| "system" \| "light" \| "dark"	"auto"	Colour mode, passed on to every figure.