KPI Group

Usage

Anatomy

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

import { KPIGroup } from "@thenamespace/uikit";

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

Vertical

// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";

import { Fragment } from "react";

With From Suffix

"use client";

import { Fragment } from "react";

import { KPIGroup } from "@thenamespace/uikit";

Horizontal

"use client";

import { Fragment } from "react";

import { KPIGroup } from "@thenamespace/uikit";

CSS Classes

Base Classes

• .kpi-group - Base group container with shared surface background and rounded corners

Orientation Classes

• .kpi-group--horizontal - Horizontal layout with equal-width children
• .kpi-group--vertical - Vertical layout stacking children

Element Classes

• .kpi-group__separator - Divider between KPI cards (width or height based on orientation)

API Reference

KPIGroup

The root component. Groups KPI cards with shared styling.

Also supports all native div HTML attributes.

KPIGroup.Separator

A visual divider between KPI cards. Renders as a 1px line.

Also supports all native span HTML attributes.