Component library

Showing 14 components in the finance deck with role data.

<RagStatusBoard>

financeDataListPresentation

RAG (red, amber, green) health rows with workstream name and note.

When to use: Programme or portfolio project status on one slide.

Preview

Programme health

Green
Platform
Release train on schedule.
Amber
Data
Schema review slips one week.
Red
Change
SME availability for UAT not confirmed.

Prop	Type	Notes
title	string	Optional. Default: `Status`. Heading above the list.
rows	{ workstream: string; status: "red" \| "amber" \| "green"; note: string }[]	Required. One row per workstream with RAG dot and short note.

Examples

<RagStatusBoard
  title="Programme health"
  rows={[
    { workstream: "Platform", status: "green", note: "Release train on schedule." },
    { workstream: "Data", status: "amber", note: "Schema review slips one week." },
    { workstream: "Change", status: "red", note: "SME availability for UAT not confirmed." },
  ]}
/>

<DeliverableGrid>

financeAgendaDataPresentation

Compact deliverable table with owner, optional due date, and status.

When to use: Wave or sprint outcome tables on project update slides.

Preview

Deliverables

DeliverableOwnerDueStatus

Invoice APIPlatform18 JunIn test

PlaybooksChange25 JunDraft

Prop	Type	Notes
title	string	Optional. Default: `Deliverables`. Heading above the grid.
columns	2 \| 3	Optional. Default: `3`. 3 columns include Due; 2 columns omit Due.Values: 2, 3Example: `3`
rows	{ deliverable: string; owner: string; due: string; status: string }[]	Required. Table rows; `due` is shown only when columns is 3.

Examples

<DeliverableGrid
  rows={[
    { deliverable: "Invoice API", owner: "Platform", due: "18 Jun", status: "In test" },
    { deliverable: "Playbooks", owner: "Change", due: "25 Jun", status: "Draft" },
  ]}
/>

<ProjectGantt>

financeTimelineDataPresentation

Professional week-indexed Gantt: time axis with gridlines, status-coloured bars with an optional inner progress fill, milestone markers, optional phase grouping, and a "today" marker. Bars scale in on slide enter (client).

When to use: High-level delivery plan or roadmap when you need a real time-scaled Gantt view (not just a phased list) without external chart libraries. Use `groups` instead of `rows` once you have more than about five workstreams, so they read as waves/phases rather than one long list.

Often with: RoadmapTimelineProcessSteps

Preview

Delivery plan

Week 0 – 15 · 16 weeks

Workstream

W0W3W6W9W12W16

Wave 1: Foundations

Discovery

Build

Sprint 1–4

Wave 2: Rollout

UAT

Go-live

Hypercare

DoneIn progressAt riskPlannedToday

Prop	Type	Notes
title	string	Optional. Default: `Delivery plan`. Slide heading.
totalWeeks	number	Optional. Default: `12`. Timeline length; indices run 0 … totalWeeks - 1.
unitLabel	string	Optional. Default: `"Week"`. Axis unit noun used in tick labels (first letter, e.g. "W3") and the caption. Use "Sprint" or "Month" for other cadences.
rows	{ trackLabel: string; segments: GanttSegment[]; milestones?: { label: string; week: number }[] }[]	Optional. Flat swimlane rows (ignored when `groups` is set). GanttSegment = { label, startWeek, durationWeeks, status?: "done" \| "active" \| "planned" \| "at-risk", progressPct?: number }.
groups	{ groupLabel: string; rows: GanttRow[] }[]	Optional. Rows organised into labelled phases/waves (e.g. "Wave 1: Foundations"), each with its own heading. Preferred over `rows` for plans with more than ~5 workstreams.
todayWeek	number	Optional. 0-based week to draw a vertical "today" marker through every row.
showLegend	boolean	Optional. Default: `true`. Show the status-colour legend below the chart. Only renders when more than one status is actually used.
tween	object	Optional. Optional subset for the bar/milestone tween: duration, ease, stagger, delay (see sanitize allowlist).

Examples

<ProjectGantt
  title="Delivery plan"
  totalWeeks={16}
  todayWeek={5}
  groups={[
    {
      groupLabel: "Wave 1: Foundations",
      rows: [
        {
          trackLabel: "Discovery",
          segments: [{ label: "Discovery", startWeek: 0, durationWeeks: 3, status: "done" }],
        },
        {
          trackLabel: "Build",
          segments: [{ label: "Sprint 1–4", startWeek: 2, durationWeeks: 6, status: "active", progressPct: 55 }],
          milestones: [{ label: "Design freeze", week: 4 }],
        },
      ],
    },
    {
      groupLabel: "Wave 2: Rollout",
      rows: [
        {
          trackLabel: "UAT",
          segments: [{ label: "UAT", startWeek: 8, durationWeeks: 3, status: "planned" }],
        },
        {
          trackLabel: "Go-live",
          segments: [{ label: "Hypercare", startWeek: 11, durationWeeks: 2, status: "at-risk" }],
          milestones: [{ label: "Go-live", week: 11 }],
        },
      ],
    },
  ]}
/>

<RiskRowList>

financeListDataPresentation

Risk watchlist with severity chip, one-line note, and owner; rows stagger in on slide enter (client).

When to use: Use for an IC red and amber slide or a portfolio watchlist intro. Four to eight risks is the sweet spot.

Preview

Risks

High
FX exposure on euro revenue
Hedge ratio under target by 18 points.
Treasury
Medium
Key-person dependency in finance
Successor named, knowledge transfer in flight.
CFO

Prop	Type	Notes
title	string	Optional. Default: `Risks`. Slide heading.
risks	{ title: string; severity: "low" \| "medium" \| "high"; note: string; owner?: string }[]	Required. Risk rows. Severity drives the chip colour.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<RiskRowList
  risks={[
    { title: "FX exposure on euro revenue", severity: "high", note: "Hedge ratio under target by 18 points.", owner: "Treasury" },
    { title: "Key-person dependency in finance", severity: "medium", note: "Successor named, knowledge transfer in flight.", owner: "CFO" }
  ]}
/>

<DealSnapshot>

financeDataStatsPresentation

Structured deal-at-a-glance block (company, sector, geography, entry, hold, instrument, ticket); fields stagger in on slide enter (client).

When to use: Use as the IC slide 1 fact block. Pair with TitleSlide above and ThesisBullets below.

Preview

Deal snapshot

CompanyLumen Health

SectorHealthcare services

GeographyUK and Ireland

EntryAug 2024

Hold period4-6 years

InstrumentCommon equity

Ticket£42m

Prop	Type	Notes
company	string	Required. Company name.
sector	string	Required. Sector or sub-sector.
geography	string	Required. Primary geography or HQ country.
entryDate	string	Required. Entry date (e.g. "Aug 2024").
holdingPeriod	string	Optional. Holding period (e.g. "4-6 years").
instrument	string	Optional. Instrument type (e.g. "Common equity", "PIK note").
ticket	string	Optional. Ticket size (e.g. "£42m").
extras	{ label: string; value: string }[]	Optional. Optional extra labelled fields (LP names, co-investors, etc.).
tween	object	Optional. Optional GSAP vars for the field entrance.

Examples

<DealSnapshot
  company="Lumen Health"
  sector="Healthcare services"
  geography="UK and Ireland"
  entryDate="Aug 2024"
  holdingPeriod="4-6 years"
  instrument="Common equity"
  ticket="£42m"
/>

<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" }
  ]}
/>

<ICActionsSince>

financeListDataPresentation

Status of conditions or actions agreed at the previous IC; rows show status chip plus optional owner and stagger in on slide enter (client).

When to use: Use as IC slide 2 or 3 to show what has happened since the last meeting. Three to eight items.

Preview

Actions since last IC

DoneSign top three customer MSAs.CCO
In progressResolve pension surplus question.CFO
OpenHire VP Engineering.CEO
BlockedClose the Frankfurt acquisition.Corp dev

Prop	Type	Notes
title	string	Optional. Default: `Actions since last IC`. Slide heading.
items	{ text: string; status: "done" \| "in-progress" \| "open" \| "blocked"; owner?: string }[]	Required. Action rows; status drives chip colour.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<ICActionsSince
  items={[
    { text: "Sign top three customer MSAs.", status: "done", owner: "CCO" },
    { text: "Resolve pension surplus question.", status: "in-progress", owner: "CFO" },
    { text: "Hire VP Engineering.", status: "open", owner: "CEO" },
    { text: "Close the Frankfurt acquisition.", status: "blocked", owner: "Corp dev" }
  ]}
/>

<VoteSlide>

financeDataCTAPresentation

Formal IC resolution slide with numbered resolutions and optional abstentions note; resolutions stagger in on slide enter (client).

When to use: Use as the formal closing slide before the appendix when a vote is recorded.

Preview

For consideration and vote

Resolutions

1
Approve the additional £8m equity injection at par.
2
Authorise the CFO to execute the amended SHA on these terms.

Member B recused per conflicts policy.

Prop	Type	Notes
title	string	Optional. Default: `Resolutions`. Slide heading.
voteLabel	string	Optional. Default: `For consideration and vote`. Small label above the title (matches IC conventions).
resolutions	{ id: string; text: string }[]	Required. Resolution rows. id is the short label (e.g. "1", "1A").
abstentionsNote	string	Optional. Optional small note about abstentions or recusals.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<VoteSlide
  resolutions={[
    { id: "1", text: "Approve the additional £8m equity injection at par." },
    { id: "2", text: "Authorise the CFO to execute the amended SHA on these terms." }
  ]}
  abstentionsNote="Member B recused per conflicts policy."
/>

<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 }
    ] }
  ]}
/>

<TopMovers>

financeDataListPresentation

Two-column top contributors and detractors to NAV or MOIC; rows stagger in on slide enter (client).

When to use: Use for a portfolio performance review slide. Three to five rows per side.

Preview

Top movers

Contributors

Lumen Health
EBITDA beat from pricing reset
+£14m
Atlas Software
ARR up 28% on enterprise wins
+£9m

Detractors

Northwind Logistics
Volume down on customer churn
-£6m
Pico Materials
Energy cost pass-through lag
-£3m

Prop	Type	Notes
title	string	Optional. Default: `Top movers`. Slide heading.
contributorsTitle	string	Optional. Default: `Contributors`. Left column heading.
detractorsTitle	string	Optional. Default: `Detractors`. Right column heading.
contributors	{ name: string; driver: string; value: string }[]	Required. Top contributors. Pre-format value (e.g. "+£12m", "+90 bps").
detractors	{ name: string; driver: string; value: string }[]	Required. Top detractors. Pre-format value with sign.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<TopMovers
  contributors={[
    { name: "Lumen Health", driver: "EBITDA beat from pricing reset", value: "+£14m" },
    { name: "Atlas Software", driver: "ARR up 28% on enterprise wins", value: "+£9m" }
  ]}
  detractors={[
    { name: "Northwind Logistics", driver: "Volume down on customer churn", value: "-£6m" },
    { name: "Pico Materials", driver: "Energy cost pass-through lag", value: "-£3m" }
  ]}
/>

<NAVSummaryCard>

financeStatsDataPresentation

Headline NAV card with optional change pill and supporting MTD / QTD / benchmark sub-metrics; tiles stagger in on slide enter (client).

When to use: Use as the opening NAV slide for a portfolio review. Keep sub-metrics to three or four.

Preview

NAV summary

As of 30 Apr 2026

NAV

£412.6m

+1.8% MTD

MTD+1.8%

QTD+4.2%

vs benchmark+90 bps

Cash drag-12 bps

Prop	Type	Notes
title	string	Optional. Default: `NAV summary`. Slide heading.
asOf	string	Optional. Optional as-of date label (top right).
navLabel	string	Optional. Default: `NAV`. Label above the headline value.
navValue	string	Required. Pre-formatted headline NAV (currency).
navDelta	string	Optional. Optional headline change pill (e.g. "+1.8% MTD").
subMetrics	{ label: string; value: string; tone?: "up" \| "down" \| "flat" }[]	Optional. Up to four supporting metrics (MTD, QTD, vs benchmark, etc.). tone colours the value.
tween	object	Optional. Optional GSAP vars for the entrance.

Examples

<NAVSummaryCard
  asOf="30 Apr 2026"
  navValue="£412.6m"
  navDelta="+1.8% MTD"
  subMetrics={[
    { label: "MTD", value: "+1.8%", tone: "up" },
    { label: "QTD", value: "+4.2%", tone: "up" },
    { label: "vs benchmark", value: "+90 bps", tone: "up" },
    { label: "Cash drag", value: "-12 bps", tone: "down" }
  ]}
/>

<WatchlistPanel>

financeListDataPresentation

Portfolio company watchlist with company, issue, trend chip, and actions; rows stagger in on slide enter (client).

When to use: Use for a portfolio review slide that calls out the names needing attention. Three to six items keeps the slide readable.

Preview

Watchlist

Northwind LogisticsCustomer churn in EU southDeterioratingPricing review by 30 Jun.
Pico MaterialsMargin pressure from energyStableHedge programme expanded.
Atlas SoftwareSalesforce ramp slower than planImprovingNew CRO joins in Q3.

Prop	Type	Notes
title	string	Optional. Default: `Watchlist`. Slide heading.
items	{ company: string; issue: string; trend: "improving" \| "stable" \| "deteriorating"; actions: string }[]	Required. Watchlist rows; trend drives chip colour and arrow.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<WatchlistPanel
  items={[
    { company: "Northwind Logistics", issue: "Customer churn in EU south", trend: "deteriorating", actions: "Pricing review by 30 Jun." },
    { company: "Pico Materials", issue: "Margin pressure from energy", trend: "stable", actions: "Hedge programme expanded." },
    { company: "Atlas Software", issue: "Salesforce ramp slower than plan", trend: "improving", actions: "New CRO joins in Q3." }
  ]}
/>

<LiquiditySchedule>

financeTimelineDataPresentation

Upcoming capital calls and distributions with date, type chip, optional note, and amount; rows stagger in on slide enter (client).

When to use: Use to give LPs visibility on the next 4-8 expected cash movements. Pre-format amounts with the fund's sign convention.

Preview

Liquidity schedule

12 Jun 2026CallWave 2 build-out.£18m
30 Jun 2026DistributionLumen Health partial exit.£24m
30 Sep 2026CallBolt-on completion.£8m

Prop	Type	Notes
title	string	Optional. Default: `Liquidity schedule`. Slide heading.
items	{ date: string; type: "call" \| "distribution"; amount: string; note?: string }[]	Required. Liquidity events in chronological order.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<LiquiditySchedule
  items={[
    { date: "12 Jun 2026", type: "call", amount: "£18m", note: "Wave 2 build-out." },
    { date: "30 Jun 2026", type: "distribution", amount: "£24m", note: "Lumen Health partial exit." },
    { date: "30 Sep 2026", type: "call", amount: "£8m", note: "Bolt-on completion." }
  ]}
/>