Block · finance

Cash Runway & Burn

Monthly cash balance with a projected depletion line, runway-in-months hero, and an auto-generated runway narrative.

State

Size

Mode

Cash runway · 16 months

22 mo

$4.92M on hand · $220k/mo net burn

Cash
Projected

Cash runway is 22 months and extending; at $220k/mo net burn, the balance reaches zero by Apr 2028.

Stripe treasury · updated daily

Demo data is illustrative. Replace with your own typed data prop.

How it computes

Net-burn runway: average monthly burn over a lookback window divides cash on hand into months remaining.

netBurn = mean(cashₜ₋₁ − cashₜ) over lookback (default 3 mo);  runway = netBurn > 0 ? cash / netBurn : ∞

Assumptions

Burn is treated as constant going forward — no acceleration, seasonality, or planned step-changes.
Lookback defaults to 3 months, capped at series length − 1.
The projection runs to min(⌈runway⌉, 24) months.

Honest about

Runway is ∞ ("Cash-positive") whenever net burn ≤ 0 — it doesn't distinguish break-even from genuine growth.
The projection is a single deterministic line with no confidence cone; long-horizon cash is more uncertain than it looks.
Needs ≥2 points; below that it reports zero burn and infinite runway rather than guessing.

Use it with your data

Data contract

Passed via the data prop — an array of objects: validated at runtime, so a bad shape degrades to the error state rather than crashing.

Field	Type	Required
date	string	yes
cash	number	yes

Static props

import { FpaCashRunway } from "@/components/blocks/fpa-cash-runway/fpa-cash-runway";

<FpaCashRunway data={myData} />

Client fetch (SWR)

const { data, isLoading, error } = useSWR("/api/metric", fetcher);
// route isLoading/error through <ChartStates>, then:
<FpaCashRunway data={data} />

Server component (RSC)

const data = await fetch(url, {
  next: { revalidate: 3600 },
}).then((r) => r.json());

<FpaCashRunway data={data} />

Map arbitrary rows

import { mapRows } from "@/lib/sextant/column-map";

const out = mapRows(rows, { /* contractKey: "yourColumn" */ }, dataSchema);
if (out.ok) <FpaCashRunway 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 (cash, projected)

<FpaCashRunway
  series={{ cash: { color: "var(--chart-3)", label: "…" } }}
/>

Format numbers (currency / locale)

const eur = new Intl.NumberFormat("de-DE", {
  style: "currency",
  currency: "EUR",
  notation: "compact",
});

<FpaCashRunway valueFormatter={(n) => eur.format(n)} />

Replace or hide the narrative

<FpaCashRunway narrative="Your own one-liner." />

// …or hide it entirely:
<FpaCashRunway narrative={false} />

Restyle any region

<FpaCashRunway
  className="max-w-xl"
  classNames={{ body: "bg-muted/20" }}
/>

Drop the card chrome (headless plot)

import { FpaCashRunwayPlot } from "@/components/blocks/fpa-cash-runway/fpa-cash-runway";

// Just the chart body — bring your own card/layout:
<FpaCashRunwayPlot data={data} config={config} />

Month	Cash
Oct 2025	$7.2M
Nov 2025	$6.84M
Dec 2025	$6.45M
Jan 2026	$6.02M
Feb 2026	$5.58M
Mar 2026	$5.09M
Apr 2026	$4.98M
May 2026	$4.92M