KpiCardsGrid

A responsive grid of metric cards that display a KPI value, label, trend indicator, and optional icon.

📖 Storybook

Preview

Live preview↗ Open in Storybook

Import

import { KpiCardsGrid } from "@xocialive/ui-components";

Basic usage

<KpiCardsGrid
  cards={[
    {
      label: "Total Users",
      value: 1284,
      trend: +12.4,
      icon: <PeopleIcon />,
    },
    {
      label: "Active Projects",
      value: 47,
      trend: -3.1,
      icon: <FolderIcon />,
    },
    {
      label: "Revenue",
      value: 284500,
      format: "currency",
      trend: +8.9,
    },
  ]}
/>

KpiCard config

Field	Type	Description
label	string	Card title
value	number | string	Metric value
trend	number	Percentage change (positive = up, negative = down)
icon	ReactNode	Optional icon
format	"number" | "currency" | "percent"	Value display format
color	string	Accent colour override

Props

Prop	Type	Default	Description
cards	KpiCardConfig[]	—	Card definitions
columns	Partial<Record<Breakpoint, number>>	{ xs: 1, sm: 2, md: 4 }	Responsive grid columns
isLoading	boolean	false	Shows skeleton cards
sx	SxProps<Theme>	—	Grid wrapper style overrides