Cash Runway
Prov1.0.0Runway, burn and cash-out date from levers and key events, on a 36-month projection.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { CashRunway, type RunwayEvent } from "@/components/ui/notchset/blocks/cash-runway";
export function Runway({ events }: { events: RunwayEvent[] }) {
return (
<CashRunway
inputs={{ cash: 18_400_000, revenue: 410_000, fixedCost: 1_050_000, hireCost: 18_000 }}
plans={[{ id: "base", label: "BASE", hires: 4, growth: 6, model: "flash", note: "4 HIRES A QUARTER · 6% GROWTH" }]}
models={[{ id: "flash", label: "ATLAS 3 FLASH", share: 0.23, note: "INFERENCE IS 23% OF REVENUE" }]}
start="2026-10"
defaultEvents={events}
onEventsChange={(next: RunwayEvent[]) => localStorage.setItem("runway-events", JSON.stringify(next))}
/>
);
}Props
inputs–{ cash, revenue, fixedCost, hireCost }Starting cash and monthly revenue and costs, in dollars.
plans–{ id, label, hires, growth, model, note }[]Presets; the first is the BASE plan drawn dashed for comparison.
models–{ id, label, share, note, warn? }[]Inference models, each costing a share of revenue.
start / months–string (YYYY-MM) / numberThe first projected month and how many (36).
defaultEvents / onEventsChange–RunwayEvent[] / (events) => voidKey events: raise and one-off in dollars, contract and recurring in dollars a month.
Anatomy
- A plan preset sets hires, growth and model; moving any lever reads CUSTOM PLAN.
- Runway turns signal under 18 months.
- DEFAULT ALIVE means break-even comes before the cash runs out.
CashRunwaydata-slot="cash-runway"KPIs, the projection chart, key events and levers.
Source
components/ui/notchset/blocks/cash-runway.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
Build for your project
Code/install build
Installation
pnpm dlx shadcn@latest add @beautiful-ui-pro/cash-runwayNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- A founder or finance view of how long the cash lasts
- Trying hiring, growth and cost scenarios side by side with the plan
Use something else when
- Accounting-grade forecasts: export to your planning model
- Budget against actual: use Budget Variance
Mistakes to avoid
- Replace the projection with your planning model before showing real numbers
- Keep event units straight: one-time in dollars, recurring in dollars a month
Agents find it by
- cash runway, burn rate, default alive, financial model, startup finance, scenario planning, forecast, Notchset
Where agents read it
- Guide for this component: https://beautiful-ui.dev/md/cash-runway.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://beautiful-ui.dev/api/mcp(setup)
Behaviour
Keyboard
- ← → / Home / End
- Move a lever
- Enter / Esc
- Add the event / close the form
Accessibility
- Levers are sliders with value text; arrows, Home and End move them
- The chart is an image labelled with the cash-out month; every number is also in the KPI row
- Plan, model and event type are radio groups; each event's remove button names it
Motion
- Any change
- The cash line and its dots glide to the new projection (620ms, dots 8ms apart)
- Lever drag
- The thumb squashes while held and settles on release
- Numbers
- Runway and burn roll
Responsive
- Under 860px (container width) the levers move under the chart; the KPIs go two by two under 640px.
Performance
- The projection is a 36-step loop per render; nothing runs while idle.
Changelog
v1.0.0 · 2026-10-04
First release
Part of
Included with Pro
Pro is in early access.
