KPI

Usage

Anatomy

Import the KPI component and access all parts using dot notation.

import { KPI } from "@blakeui/pro-react";

<KPI>
  <KPI.Header>
    <KPI.Icon />
    <KPI.Title />
  </KPI.Header>
  <KPI.Actions />
  <KPI.Content>
    <KPI.Value />
    <KPI.Trend />
    <KPI.Progress />
  </KPI.Content>
  <KPI.Chart />
  <KPI.Separator />
  <KPI.Footer />
</KPI>;

With Actions

With Chart Bottom

With Chart Inline

Only a chart that is a direct child of KPI goes full-bleed; nesting it inside KPI.Content keeps it in the value row, where it fills the grid's trailing auto column and needs an explicit width.

With Footer

With Icon

With Progress

CSS Classes

Base Classes

• .kpi — The card shell. Relative, flex column, gap: 0, padding: --spacing * 4, border-radius: --radius * 2. Rendered on top of the @blakeui/react Card, whose default gap the gap: 0 neutralises so KPI can space its parts with margins instead.

Element Classes

• .kpi__header — Top row. Flex, centred, gap: --spacing * 2, margin-bottom: --spacing * 1.
• .kpi__content — The value row. grid-template-columns: 1fr auto, items centred, column-gap: --spacing * 2, flex: 1 — so the value takes the free space and the trend or chart sits in the trailing column.
• .kpi__icon — Status tile. --spacing * 8 square, border-radius: --radius * 1, centred, and it sizes its own svg to --spacing * 4.
• .kpi__actions — Absolutely positioned, inset calc(--spacing * 4 - --spacing * 1.5) from the top-right so the ghost button's own padding lines its glyph up with the card padding.
• .kpi__title — 0.875rem/1.25rem, font-weight: 500, color: --muted. Renders as a dt.
• .kpi__value — 1.5rem/2rem, font-weight: 600, letter-spacing: -0.025em, color: --foreground. Renders as a dd.
• .kpi__trend — flex-shrink: 0, so the chip never compresses when the value is long.
• .kpi__progress — Spans the whole value row (grid-column: 1 / -1) and adds --spacing * 1 above, dropping below the value rather than beside it.
• .kpi__chart — Sparkline container. overflow: hidden plus a horizontal mask-image that fades to transparent over --kpi-chart-fade at each edge.
• .kpi > .kpi__chart — Full-bleed treatment, applied only when the chart is a direct child of the root: margin-top: --spacing * 2, negative inline and bottom margins of --spacing * 4, and the two bottom corners rounded to --radius * 2. A chart nested anywhere else keeps the mask and nothing else.
• .kpi > .kpi__chart:has(+ .kpi__separator, + .kpi__footer) — Drops the bottom bleed and the corner rounding when a separator or footer follows the chart.
• .kpi__separator — width: calc(100% + --spacing * 8) with --spacing * -4 inline margins, so the rule reaches both card edges through the padding.
• .kpi__footer — margin-bottom: --spacing * -1.
• .kpi__separator + .kpi__footer — Removes the footer's top margin when a separator already provides the gap.

Data Attributes

• [data-status="success"] on .kpi__icon — --success at 10% for the tile, --success for the glyph.
• [data-status="warning"] on .kpi__icon — --warning at 10% for the tile, --warning for the glyph.
• [data-status="danger"] on .kpi__icon — --danger at 10% for the tile, --danger for the glyph.
• [data-slot] — Eleven of the twelve parts carry one (kpi, kpi-header, kpi-content, kpi-icon, kpi-title, kpi-value, kpi-progress, kpi-actions, kpi-chart, kpi-separator, kpi-footer), so a part can be targeted without depending on its BEM class.
• [data-trend="up"] / [data-trend="down"] / [data-trend="neutral"] on .kpi__trend — Set by the underlying Chip. KPI.Trend is the one part with no kpi-trend slot: the Chip's own data-slot="chip" wins, so target the chip by .kpi__trend or by data-trend instead.

CSS Variables

• --kpi-chart-fade — How far the sparkline mask fades in from each horizontal edge. Declared on .kpi__chart; default 10%.

API Reference

KPI

The root. Renders the @blakeui/react Card and supplies the slot context every part reads.

Also accepts every BlakeUI Card prop.

KPI.Header

The top row — icon and title. Sits above KPI.Content, and is the only part KPI.Actions visually overlaps.

Also accepts every native div attribute.

KPI.Content

The value row. A two-column grid (1fr auto) that pairs the value with whatever sits beside it.

Also accepts every native div attribute.

KPI.Icon

The tinted glyph tile. Sizes any svg inside it, so an icon needs no size class of its own.

Also accepts every native div attribute.

KPI.Title

The metric label, rendered as a dt.

Also accepts every native dt attribute.

KPI.Value

The formatted number, rendered as a dd. Wraps NumberValue, so formatting is locale-aware and driven entirely by props.

KPI.Trend

The delta badge. Wraps TrendChip, whose direction drives both the caret and the colour.

KPI.Progress

A full-width bar beneath the value. Wraps the @blakeui/react ProgressBar at size sm, whose fill transitions over 300ms when the value changes and holds still under prefers-reduced-motion.

Also accepts every native div attribute.

KPI.Actions

The corner button. Wraps the @blakeui/react Button as a small ghost icon-only button, absolutely positioned over the header.

Also accepts every BlakeUI Button prop.

KPI.Chart

The sparkline. Full-bleed as a direct child of KPI, inline anywhere else, and edge-masked in both cases.

Also accepts every native div attribute.

KPI.Separator

An edge-to-edge rule. Wraps the @blakeui/react Separator and widens it back through the card padding.

Also accepts every BlakeUI Separator prop.

KPI.Footer

The bottom strip, for a link or a supporting detail.

Also accepts every native div attribute.