Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA KPI card whose period switch recomputes the value and the change against the previous period, announcing the new figures politely.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
A headline number that people want to view over 7, 30 or 90 days and compare with the period before.
Do not use it when: The number never changes with a period, or the comparison needs a full chart.
import { KpiPeriodCompare } from "@/components/kpi-period-compare"<KpiPeriodCompare
label="Active users"
series={{ "7d": [1200, 1100], "30d": [5200, 4800] }}
/>| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Metric name. |
series | Record<string, [number, number]> | - | Current and previous value per period key. |
format | (n: number) => string | en-US number | Formats a value. |
The period switch is a toggle group (roving focus, arrow keys). The figures live in a polite live region and the change carries a visible up or down word.
The pattern ships with a test (kpi-period-compare.test.tsx). It covers switching the period and the recalculated percentage change.