Component library

Showing 5 components in the finance deck with role chart.

<BurnRunway>

financeStatsChartPresentation

Three-up summary for cash on hand, runway, and optional next milestone.

When to use: Steering updates, IC memos, or founder-style project finance snapshots.

Preview

Cash

£2.4m

Runway

14 months

Next gate

Series A data room · Aug

Prop	Type	Notes
cashLabel	string	Optional. Default: `Cash`. Label above cash figure.
cashValue	string	Required. Cash headline (include currency).
runwayLabel	string	Optional. Default: `Runway`. Label above runway figure.
runwayValue	string	Required. Runway headline (e.g. months or date).
milestoneLabel	string	Optional. Third column label; omit with milestoneValue to hide the column.
milestoneValue	string	Optional. Third column value when both milestone props are set.

Examples

<BurnRunway
  cashValue="£2.4m"
  runwayValue="14 months"
  milestoneLabel="Next gate"
  milestoneValue="Series A data room · Aug"
/>

<CapitalStructureBar>

financeChartDataPresentation

Stacked horizontal bar of capital structure tiers (senior, mezz, equity) with proportional widths; segments scale in on slide enter (client).

When to use: Use to show the financing stack on IC or refinancing slides. Two to five tiers; numeric values share one currency and scale.

Preview

Pro-forma capital structure

Senior debt£80m (48%)
Mezzanine£25m (15%)
Equity£60m (36%)

Pro-forma at close; excludes upsize option.

Pro-forma capital structure

Senior debt$120m (59%)
Equity$85m (41%)

Prop	Type	Notes
title	string	Optional. Default: `Capital structure`. Slide heading.
tiers	{ label: string; value: number; tone?: "brand" \| "neutral" \| "success" \| "warning" \| "error" }[]	Required. Tiers in stack order (typically senior at the left). Values share currency and scale; only ratios matter for bar widths.
currency	"GBP" \| "USD" \| "EUR" \| "CHF" \| "JPY" \| "none"	Optional. Default: `GBP`. Currency code for tier value labels.Values: GBP, USD, EUR, CHF, JPY, none
scale	"m" \| "bn" \| "k" \| "none"	Optional. Default: `m`. Magnitude suffix appended to tier values (e.g. m for millions).Values: m, bn, k, none
footnote	string	Optional. Optional small footnote (as-of date, source, caveats).
tween	object	Optional. Optional GSAP vars for the segment entrance.

Examples

<CapitalStructureBar
  title="Pro-forma capital structure"
  currency="GBP"
  scale="m"
  tiers={[
    { label: "Senior debt", value: 80, tone: "brand" },
    { label: "Mezzanine", value: 25, tone: "neutral" },
    { label: "Equity", value: 60, tone: "success" }
  ]}
  footnote="Pro-forma at close; excludes upsize option."
/>

<CapitalStructureBar
  title="Pro-forma capital structure"
  currency="USD"
  scale="m"
  tiers={[
    { label: "Senior debt", value: 120, tone: "brand" },
    { label: "Equity", value: 85, tone: "success" }
  ]}
/>

<CovenantHeadroom>

financeDataChartPresentation

Covenant compliance grid with limit, headroom, and status chip per row; rows stagger in on slide enter (client).

When to use: Use on quarterly portfolio company review slides. Keep to two to four covenants.

Preview

Covenant headroom

CovenantLimitHeadroomStatus

Net leverage≤ 5.5x0.8xOK

Interest cover≥ 2.5x0.3xWatch

Capex cap£12m£1.4mWatch

Prop	Type	Notes
title	string	Optional. Default: `Covenant headroom`. Slide heading.
rows	{ covenant: string; limit: string; headroom: string; status: "ok" \| "watch" \| "breach" }[]	Required. Covenant rows; status drives the chip colour.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<CovenantHeadroom
  rows={[
    { covenant: "Net leverage", limit: "≤ 5.5x", headroom: "0.8x", status: "ok" },
    { covenant: "Interest cover", limit: "≥ 2.5x", headroom: "0.3x", status: "watch" },
    { covenant: "Capex cap", limit: "£12m", headroom: "£1.4m", status: "watch" }
  ]}
/>

<ValueBridge>

financeChartPresentation

Waterfall-lite EBITDA / EV bridge: start anchor, signed step columns (positive green, negative red), end anchor, with horizontal gridlines and a Y-axis; columns scale up on slide enter (client).

When to use: Use to walk the committee through value creation drivers. Four to six steps reads cleanly; more becomes noise on a slide. All values share one currency and scale.

Preview

EBITDA bridge

£18m

+£4m

+£3m

+£2m

-£1m

£26m

Entry FY24PricingVolumeCost actionsFXRun-rate FY26

EBITDA bridge

$18m

+$4m

+$3m

$26m

Entry FY24PricingVolumeRun-rate FY26

Prop	Type	Notes
title	string	Optional. Default: `Value bridge`. Slide heading.
start	{ label: string; value: number }	Required. Left anchor (e.g. entry EBITDA).
steps	{ label: string; delta: number }[]	Required. Sequence of signed deltas. Each step is one column.
end	{ label: string; value: number }	Required. Right anchor (e.g. current or projected EBITDA).
currency	"GBP" \| "USD" \| "EUR" \| "CHF" \| "JPY" \| "none"	Optional. Default: `GBP`. Currency code for value labels.Values: GBP, USD, EUR, CHF, JPY, none
scale	"m" \| "bn" \| "k" \| "none"	Optional. Default: `m`. Magnitude suffix appended to values (e.g. m for millions).Values: m, bn, k, none
gridLines	number	Optional. Default: `4`. Number of horizontal gridlines on the plot (including top and bottom).
tween	object	Optional. Optional GSAP vars for the column entrance.

Examples

<ValueBridge
  title="EBITDA bridge"
  currency="GBP"
  scale="m"
  start={{ label: "Entry FY24", value: 18 }}
  steps={[
    { label: "Pricing", delta: 4 },
    { label: "Volume", delta: 3 },
    { label: "Cost actions", delta: 2 },
    { label: "FX", delta: -1 }
  ]}
  end={{ label: "Run-rate FY26", value: 26 }}
/>

<ValueBridge
  title="EBITDA bridge"
  currency="USD"
  scale="m"
  start={{ label: "Entry FY24", value: 18 }}
  steps={[{ label: "Pricing", delta: 4 }, { label: "Volume", delta: 3 }]}
  end={{ label: "Run-rate FY26", value: 26 }}
/>

<ExposureDonutRow>

financeChartDataPresentation

Side-by-side donut small multiples (sector, geography, vintage); donut arcs draw and rows stagger in on slide enter (client).

When to use: Use for a portfolio exposure slide where two to four breakdowns sit side by side. Keep each donut to three to five segments.

Preview

Portfolio exposure

Sector

Healthcare38%
Software27%
Industrials20%
Consumer15%

Geography

UK45%
EU32%
North America23%

Vintage

202218%
202330%
202435%
202517%

Prop	Type	Notes
title	string	Optional. Optional slide heading.
groups	{ label: string; segments: { name: string; value: number }[] }[]	Required. Two to four donut groups. value is a numeric weight; percentages are derived.
tween	object	Optional. Optional GSAP vars for the donut and row entrance.

Examples

<ExposureDonutRow
  title="Portfolio exposure"
  groups={[
    { label: "Sector", segments: [
      { name: "Healthcare", value: 38 },
      { name: "Software", value: 27 },
      { name: "Industrials", value: 20 },
      { name: "Consumer", value: 15 }
    ] },
    { label: "Geography", segments: [
      { name: "UK", value: 45 },
      { name: "EU", value: 32 },
      { name: "North America", value: 23 }
    ] },
    { label: "Vintage", segments: [
      { name: "2022", value: 18 },
      { name: "2023", value: 30 },
      { name: "2024", value: 35 },
      { name: "2025", value: 17 }
    ] }
  ]}
/>