KpiCard

A card component for displaying key metrics with optional trend indicators and sparklines. Perfect for dashboard headers and summary sections.

Playground

Experiment with different props to customize your KPI card:

Revenue

$125K↗12.50%

Props

Midnight

label

value

125000

delta

12.5

Code

<KpiCard
  data={data}
  theme="midnight"
  label="Revenue"
  value={125000}
  delta={12.5}
/>

Usage

Import the component and configure your metric:

tsx

import { KpiCard } from '@derpdaderp/chartkit';

const revenueData = [
  { value: 95000 },
  { value: 102000 },
  { value: 98000 },
  { value: 125000 },
];

<KpiCard
  label="Revenue"
  value={125000}
  delta={12.5}
  data={revenueData}
  theme="midnight"
  format={(v) => `$${(v / 1000).toFixed(0)}K`}
/>

Without Sparkline

The sparkline is optional - just omit the data prop:

Active Users

1,234↗5.20%

tsx

<KpiCard
  label="Active Users"
  value={1234}
  delta={5.2}
  theme="midnight"
/>

Negative Delta

Negative deltas are automatically styled in red:

Bounce Rate

32.5%↘8.30%

Load Time

1.2s↘15.70%

Custom Formatting

Use the format prop to customize how values are displayed:

tsx

// Currency
format={(v) => `$${v.toLocaleString()}`}

// Percentage
format={(v) => `${v.toFixed(2)}%`}

// Abbreviated
format={(v) => `${(v / 1000000).toFixed(2)}M`}

// Duration
format={(v) => `${v}ms`}

Grid Layout

KpiCards work great in grid layouts:

Total Revenue

$2.78M↗12.50%

Active Users

45,230↗8.30%

Conversion Rate

3.24%↘2.10%

Props

Prop	Type	Default	Description
`label*`	`string`	-	Label text displayed above the value
`value*`	`number`	-	Main KPI value
`delta`	`number`	-	Percentage change (positive or negative)
`data`	`T[] \| number[]`	-	Optional sparkline data
`dataKey`	`keyof T`	`"value"`	Key to extract numeric value when data contains objects
`theme*`	`ThemeName`	-	Theme name
`format`	`(value: number) => string`	-	Custom value formatter
`className`	`string`	-	Additional CSS class
`style`	`CSSProperties`	-	Custom styles
`children`	`ReactNode`	-	Optional children to render below the sparkline