KPI Card

Key performance indicator card with optional sparkline and trend arrow.

Import

import { KpiCard } from "neoterm-ui";

<KpiCard
  label="Revenue"
  value="$12,450"
  change={5.2}
  trend="up"
  sparkData={[10, 15, 12, 18, 22, 20, 25]}
/>

Prop	Type	Default	Description
label	string	—	KPI label text.
value	string \| number	—	Primary display value.
change	number	—	Percentage change.
trend	"up" \| "down" \| "flat"	—	Trend direction.
unit	string	—	Unit suffix.
sparkData	number[]	—	Data points for inline sparkline.
sparkColor	string	—	Sparkline color.
className	string	—	Additional CSS classes.