KPI Group

Usage

Mobile

Tablet

Desktop

71,897

1.34%

58.16%

2.02%

24.57%

4.05%

Anatomy

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

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

<KPIGroup>
  <KPI />
  <KPIGroup.Separator />
  <KPI />
</KPIGroup>;

Vertical

Mobile

Tablet

Desktop

99.98%

0.02%

148 ms

12 ms

0.42%

0.08%

With From Suffix

There is no from prop — the comparison figure is composed inside KPI.Value's render-prop children.

Mobile

Tablet

Desktop

71,897from 70,946

1.34%

24.57%from 28.62%

4.05%

CSS Classes

Base Classes

.kpi-group — The shared surface. background-color: --surface, box-shadow: --surface-shadow, and overflow: hidden so the member cards' square corners are clipped back to the group's own radius.

Orientation Classes

.kpi-group--horizontal — display: flex, flex-direction: row, border-radius: --radius * 2.
.kpi-group--horizontal > [data-slot="kpi"] — flex: 1 for equal-width columns, plus border-width: 0, border-radius: 0, box-shadow: none so each card surrenders its own elevation to the group.
.kpi-group--horizontal > .kpi-group__separator — align-self: stretch, width: 1px, and margin-block: --spacing * 4 so the rule stops short of the top and bottom edges.
.kpi-group--vertical — display: flex, flex-direction: column, border-radius: --radius * 2.
.kpi-group--vertical > [data-slot="kpi"] — border-width: 0, border-radius: 0, box-shadow: none. No flex: 1, so rows keep their natural height rather than dividing the column evenly.
.kpi-group--vertical > .kpi-group__separator — align-self: stretch, height: 1px, and no block margin, so the rule runs edge to edge.

Element Classes

.kpi-group__separator — The divider. flex-shrink: 0 so it survives a crowded row, painted in --separator. The orientation classes above are what give it its 1px axis.

Data Attributes

[data-slot="kpi-group"] on the root and [data-slot="kpi-group-separator"] on the divider — so either part can be targeted without depending on its BEM class.
[data-slot="kpi"] — Consumed, not defined: set by KPI, and the selector both orientation classes use to strip a member card's border, radius, and shadow. Anything else placed in the group keeps its own chrome.

API Reference

KPIGroup

The root. Renders a div with role="group" and supplies the slot context KPIGroup.Separator reads.

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout direction. It also decides which axis `KPIGroup.Separator` draws on, so the same separator markup works in both — `horizontal` gives equal-width columns divided by vertical rules, `vertical` gives natural-height rows divided by horizontal ones.
`children`	`ReactNode`	—	The member cards and their dividers. Separators are not inserted for you — render a `KPIGroup.Separator` before every card after the first. Only children marked `data-slot="kpi"` give up their border, radius, and shadow to the group.
`className`	`string`	—	Merged onto `.kpi-group`, alongside the orientation modifier.

Also accepts every native div attribute.

KPIGroup.Separator

The divider between cards. A span sized to 1px on whichever axis the group's orientation calls for.

Prop	Type	Default	Description
`className`	`string`	—	Merged onto `.kpi-group__separator`.
`aria-hidden`	`boolean`	`true`	The divider is decorative and hidden from assistive tech by default. It carries no orientation prop of its own — it reads the group's.

Also accepts every native span attribute.

KPI Group

On this page