Component library

Showing 22 components in the finance deck.

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

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

<BlockersAndAsks>

financeListPresentation

Two columns: blockers list and asks list using the slide bullet style.

When to use: Committee or sponsor slide separating risks from explicit decisions needed.

Preview

Blockers

SAP cutover window clashes with quarter close
UAT sign-off owner on leave

Asks

Confirm Wave 2 scope by Friday
Nominate deputy approver for finance

Prop	Type	Notes
blockersTitle	string	Optional. Default: `Blockers`. Left column heading.
asksTitle	string	Optional. Default: `Asks`. Right column heading.
blockers	string[]	Required. Bullet strings for blockers.
asks	string[]	Required. Bullet strings for asks.

Examples

<BlockersAndAsks
  blockers={["SAP cutover window clashes with quarter close", "UAT sign-off owner on leave"]}
  asks={["Confirm Wave 2 scope by Friday", "Nominate deputy approver for finance"]}
/>

<NextThirtyDays>
financeListTimelinePresentation
Ordered list of dated commitments for the coming month.
When to use: Delivery cadence or milestone preview on project update decks.
Preview
Next 30 days
Week 1Freeze scope for pilot A.
Week 2Integration test with sandbox ERP.
Week 4Go / no-go for production cutover.
Prop Type Notes
title string Optional. Default: Next 30 days. Slide heading.
items { date: string; text: string }[] Required. `date` is a short label (e.g. "12 Jun" or "Week 2"); `text` is the commitment.
Examples
```
<NextThirtyDays
  items={[
    { date: "Week 1", text: "Freeze scope for pilot A." },
    { date: "Week 2", text: "Integration test with sandbox ERP." },
    { date: "Week 4", text: "Go / no-go for production cutover." },
  ]}
/>
```

Prop	Type	Notes
title	string	Optional. Default: `Next 30 days`. Slide heading.
items	{ date: string; text: string }[]	Required. `date` is a short label (e.g. "12 Jun" or "Week 2"); `text` is the commitment.

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

<DecisionCallout>

financeStatementCTAPresentation

Single ask with question, recommendation, and optional vote options; the card scales in on slide enter (client).

When to use: Use for the closing IC slide before the appendix when a single decision needs to land.

Preview

Decision required

Approve the additional £8m equity injection at par to fund Wave 2 build-out?

Recommendation

Approve, conditional on signed MSAs with the top three Wave 1 customers by 30 June.

Approve
Approve with conditions
Defer

Prop	Type	Notes
question	string	Required. The decision being asked of the committee.
recommendation	string	Required. Recommended answer in one sentence.
decisionLabel	string	Optional. Default: `Decision required`. Pill text above the question.
options	string[]	Optional. Optional pill list of formal vote options (e.g. Approve, Defer).
tween	object	Optional. Optional GSAP vars for the card entrance.

Examples

<DecisionCallout
  question="Approve the additional £8m equity injection at par to fund Wave 2 build-out?"
  recommendation="Approve, conditional on signed MSAs with the top three Wave 1 customers by 30 June."
  options={["Approve", "Approve with conditions", "Defer"]}
/>

<ConfidentialStrip>

financeChromePresentation

Discreet "Private and confidential" strip with optional meta line; fades in on slide enter (client).

When to use: Use as a footer or banner on every slide of a regulated or LP-facing deck. Keep the meta line short (fund name, meeting date).

Preview

Private and confidentialAcme Fund III · 14 May 2026

Prop	Type	Notes
text	string	Optional. Default: `Private and confidential`. Confidentiality wording.
meta	string	Optional. Optional secondary line (fund name, meeting date).
variant	"footer" \| "banner"	Optional. Default: `footer`. footer = top-bordered footnote line; banner = bordered card.Values: footer, banner
tween	object	Optional. Optional GSAP vars for the fade-in.

Examples

<ConfidentialStrip text="Private and confidential" meta="Acme Fund III · 14 May 2026" />

<LogoLockup>

financeChromeTitlePresentation

Sponsor + company logo lockup with separator; halves slide in from the sides on slide enter (client).

When to use: Use on IC deal title slides to anchor the sponsor and target. Pass remote URLs (https) for both logos.

Preview

Prop	Type	Notes
sponsorSrc	string	Required. Sponsor logo URL.
sponsorAlt	string	Required. Alt text for the sponsor logo.
companySrc	string	Required. Company logo URL.
companyAlt	string	Required. Alt text for the company logo.
separator	string	Optional. Default: `"x"`. Glyph between the two logos (often "x").
height	number	Optional. Default: `64`. Maximum logo height in pixels (24–160).
tween	object	Optional. Optional GSAP vars for the entrance.

Examples

<LogoLockup sponsorSrc="https://example.com/sponsor.png" sponsorAlt="Sponsor" companySrc="https://example.com/target.png" companyAlt="Target" />

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

<ThesisBullets>

financeListStatementPresentation

Investment thesis bullets with numbered chips; bullets stagger in from the left on slide enter (client).

When to use: Use for three to five thesis points on IC slide 2. Keep each bullet to one tight sentence.

Preview

Investment thesis

1
Top three operator in a structurally undersupplied UK community-care market.
2
Margin expansion runway from a measured pricing-policy reset under new CFO.
3
Three identified bolt-on targets at sub-6x EBITDA priced before year-end.

Prop	Type	Notes
title	string	Optional. Default: `Investment thesis`. Slide heading.
bullets	string[]	Required. Three to five thesis bullet strings.
tween	object	Optional. Optional GSAP vars for the bullet entrance.

Examples

<ThesisBullets
  bullets={[
    "Top three operator in a structurally undersupplied UK community-care market.",
    "Margin expansion runway from a measured pricing-policy reset under new CFO.",
    "Three identified bolt-on targets at sub-6x EBITDA priced before year-end."
  ]}
/>

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

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

Preview

Programme health

Examples

Preview

Examples

Preview

Blockers

Asks

Examples

Preview

Next 30 days

Examples

Preview

Deliverables

Examples

Preview

Delivery plan

Examples

Preview

Risks

Examples

Preview

Examples

Preview

Examples

Preview

Examples

Preview

Deal snapshot

Examples

Preview

Investment thesis

Examples

Preview

Pro-forma capital structure

Pro-forma capital structure

Examples

Preview

Covenant headroom

Examples

Preview

EBITDA bridge

EBITDA bridge

Examples

Preview

Actions since last IC

Examples

Preview

Resolutions

Examples

Preview

Portfolio exposure

Examples

Preview

Top movers

Contributors

Detractors

Examples

Preview

NAV summary

Examples

Preview

Watchlist

Examples

Preview

Liquidity schedule

Examples