# KPI card

> A metric with delta, hint and an optional sparkline.

Component · Free · https://lodeui.com/components/kpi-card

## When to use

- A headline metric with its change and a small trend.

## When not to use

- Detailed analysis: use a chart.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/kpi-card.json
```

npm dependencies: lucide-react

## Usage

```tsx title="example.tsx"
import { KpiCard } from "@/components/ui/kpi-card";
import { Sparkline } from "@/components/ui/sparkline";

export function Churn() {
  return <KpiCard label="Churn" value="2.1%" delta={-0.4} deltaSuffix="pts" invert chart={<Sparkline data={[3, 2.8, 2.5, 2.1]} />} />;
}
```

## API reference

### KpiCard

Label, value, colored delta, hint and optional chart.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label / value | `string / ReactNode` | – | Pass a NumberTicker as value for animation. |
| delta / deltaSuffix | `number / string` | `— / "%"` | Change vs the comparison period. |
| invert | `boolean` | – | Lower is better (churn, latency): flips green and red. |
| hint / chart / icon | `ReactNode` | – | Extras. |

## Accessibility

- The delta includes an arrow and sign, not just color.

## Motion

- Inherits motion from what you pass as value or chart.

## Responsive behavior

- Fills its grid cell; use a 2-column grid on phones.

## Performance

- Static.

## Notes for AI

- Set invert for metrics where going down is good.

## Related

- [Number ticker](https://lodeui.com/components/number-ticker) — Every digit rolls on its own wheel, odometer style.
- [Sparkline](https://lodeui.com/components/sparkline) — A tiny trend line that draws itself in.
- [Gauge](https://lodeui.com/components/gauge) — Half-circle gauge with warning and danger thresholds.