---
title: "KPI row"
description: "Four headline numbers in one strip, each with its change on the previous period and a sparkline, and a 7D · 30D · 90D switch."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/kpi-row
---

# KPI row

Four headline numbers in one strip, each with its change on the previous period and a sparkline, and a 7D · 30D · 90D switch.

Each tile shows its label, the period's figure and the change on the period before, with an arrow and a spoken “up” or “down” so the change never rests on colour. A sparkline of the days (weeks for 90 days) sits along the bottom. Switching the period shows skeletons at the exact size of each line until the numbers land, so nothing moves; screen readers hear which period is showing. Four tiles sit in a row where the card is wide enough and two by two where it isn't. Pass your own data, or loading while you fetch it.

A Pro block built on Base UI and Tailwind CSS v4.

## Installation

This is a Pro item. Once per project, create a token at https://ui.edbn.me/dashboard/tokens, put it in `.env.local` as `EDBN_TOKEN`, and add the registry to `components.json`:

```json
{
  "registries": {
    "@edbn": {
      "url": "https://ui.edbn.me/r/{name}.json",
      "headers": { "Authorization": "Bearer ${EDBN_TOKEN}" }
    }
  }
}
```

Then install:

```bash
npx shadcn@4.19.0 add @edbn/kpi-row
```

## Dependencies
- npm: lucide-react@^1.33.0, recharts@^3.8.0
- edbn: edbn-base, card, chart, skeleton, toggle-group

## Source

The source is part of Pro (https://ui.edbn.me/pricing). The install above adds it to the project, ready to edit.

## More dashboards blocks

All 5, with install commands: https://ui.edbn.me/docs/blocks/dashboards · https://ui.edbn.me/docs/blocks/dashboards.md

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt