# KpiCard

> Metric + delta + optional sparkline.

Source: https://lopifi.com/components/kpi-card
Part of: Lopifi — US GAAP books on autopilot, checked by a CPA (https://lopifi.com)

---

- **Family:** Cards — 
- **Status:** Implemented
- **Spec:** https://lopifi.com/docs/catalog/02-cards

## Install

```bash
npx shadcn@latest add @lopifi/theme
npx shadcn@latest add @lopifi/kpi-card
```

## Specification

Label · figure · delta · optional sparkline. The dashboard atom.

- **Baselines align across a `KpiRow`.** Use `grid` with `auto-rows-fr` and a shared figure row, or two cards with different label lengths will have their figures at different heights — the most visible alignment failure on any dashboard.
- **Display family forbidden** here. Figures align across the row.
- `polarity` required, no default. Forcing the decision is the point.
- The comparison basis is always shown: `vs. Aug`, never a bare `+5.3%`.

**Loading:** skeleton with the figure block at the exact figure width, or the card jumps when data lands.

## Rules this component obeys

Money is minor units, never floats. `null` is not `0` and neither is redacted. Negatives render in accounting parentheses with the parenthesis column reserved on both sides. Debit and credit are two columns. Per-currency decimal places. Polarity is explicit — up is not always good. Every figure states its period, entity, currency, basis and as-of.