Board KPI Pack
One board-ready screen composing runway, ARR (NRR/GRR), revenue-vs-plan, and gross margin — each tile computed from raw inputs with its own narrative.
Finance · KPI digest
as of Apr 2026 · 0 of 4 flagged
Cash runway is 71 months and extending; at $80k/mo net burn, the balance reaches zero by Mar 2032.
ARR ended Q1 2026 at $16.3M (+$2.12M net new), with 102.3% net and 93.5% gross retention.
Revenue came in 3.0% over budget in Q1 2026 — $140k favorable.
Gross margin is 70.0%, $3.39M on $4.84M of revenue.
| Metric | Value | Detail |
|---|---|---|
| Cash runway | 71 mo | $5.68M on hand · $80k/mo burn |
| ARR · Q1 2026 | $16.3M | 102.3% NRR · 93.5% GRR · +$2.12M net new |
| Revenue vs plan · Q1 2026 | $4.84M | +3.0% vs plan · favorable |
| Gross margin | 70.0% | $3.39M on $4.84M revenue |
FP&A close · updated hourly
Demo data is illustrative. Replace with your own typed data prop.
Use it with your data
Data contract
Passed via the data prop — an object: validated at runtime, so a bad shape degrades to the error state rather than crashing.
| Field | Type | Required |
|---|---|---|
| asOf | string | yes |
| cash | object | yes |
| arr | object | yes |
| revenue | object | yes |
| margin | object | yes |
Static props
import { FpaBoardKpiPack } from "@/components/blocks/fpa-board-kpi-pack/fpa-board-kpi-pack";
<FpaBoardKpiPack data={myData} />Client fetch (SWR)
const { data, isLoading, error } = useSWR("/api/metric", fetcher);
// route isLoading/error through <ChartStates>, then:
<FpaBoardKpiPack data={data} />Server component (RSC)
const data = await fetch(url, {
next: { revalidate: 3600 },
}).then((r) => r.json());
<FpaBoardKpiPack data={data} />Map arbitrary rows
import { mapRows } from "@/lib/sextant/column-map";
const out = mapRows(rows, { /* contractKey: "yourColumn" */ }, dataSchema);
if (out.ok) <FpaBoardKpiPack data={out.data} />;Make it yours
Every customization below is an optional prop — omit them all and you get the defaults shown above. Recolor, reformat, restyle, or drop the card chrome without forking the component.
Recolor or rename a series (spark)
<FpaBoardKpiPack
series={{ spark: { color: "var(--chart-3)", label: "…" } }}
/>Format numbers (currency / locale)
const eur = new Intl.NumberFormat("de-DE", {
style: "currency",
currency: "EUR",
notation: "compact",
});
<FpaBoardKpiPack valueFormatter={(n) => eur.format(n)} />Restyle any region
<FpaBoardKpiPack
className="max-w-xl"
classNames={{ body: "bg-muted/20" }}
/>