Component library

<Slide>
Presentation
Base slide canvas with padding inside the deck.
When to use: Wrap slide body when you do not need a named layout template.
Preview
Part 1
Agenda
Prop Type Notes
children ReactNode Required. Slide content.
className string Optional. Extra Tailwind classes on the inner frame.
Examples
```
<Slide>
 <TitleSlide label="Part 1" title="Agenda" />
</Slide>
```
<TitleSlide>
Presentation
Hero title slide with optional small label and subtitle.
When to use: First slide of a deck or part boundaries.
Preview
Lunnoa
Automation discovery
Workshop outcomes · May 2026
Prop Type Notes
title string Required. Main headline.
subtitle string Optional. Supporting line under the title.
label string Optional. Small uppercase label above the title.
Examples
```
<TitleSlide label="Lunnoa" title="Automation discovery" subtitle="Workshop outcomes · May 2026" />
```
<SectionSlide>
Presentation
Section heading slide with optional supporting line.
When to use: Mark a new chapter inside the deck.
Preview
Today
How work actually flows
Prop Type Notes
title string Required. Section title.
kicker string Optional. Small line above the title.
Examples
```
<SectionSlide kicker="Today" title="How work actually flows" />
```
<SplitSlide>
Presentation
Two-column layout for text plus visual or bullets plus callout.
When to use: Compare two blocks or pair narrative with a stat.
Preview
Five inboxes per invoice
No single queue of record
Manual touches
5
per supplier invoice
Prop Type Notes
left ReactNode Required. Left column content.
right ReactNode Required. Right column content.
reverse boolean Optional. Default: false. Swap columns on wide screens.
Examples
```
<SplitSlide
 left={<BulletList items={["Five inboxes per invoice", "No single queue of record"]} />}
 right={<BigStat label="Manual touches" value="5" hint="per supplier invoice" />}
/>
```
<QuoteSlide>
Presentation
Large pull quote with attribution.
When to use: Stakeholder voice on a dedicated slide.
Preview
We approve the same five steps five hundred times a month.
Head of Finance · Finance
Prop Type Notes
children ReactNode Required. Quoted text.
attribution string Optional. Name.
role string Optional. Role or department.
Examples
```
<QuoteSlide attribution="Head of Finance" role="Finance">
 We approve the same five steps five hundred times a month.
</QuoteSlide>
```
<BigStat>
Presentation
Single oversized metric with label and optional hint.
When to use: One number that should land emotionally.
Preview
Invoices / month
1,240
AP team, three legal entities
Prop Type Notes
label string Required. Short label above the value.
value string Required. The headline value.
hint string Optional. Muted footnote under the value.
Examples
```
<BigStat label="Invoices / month" value="1,240" hint="AP team, three legal entities" />
```
<MediaSlide>
Presentation
Title plus optional image area (use src + alt for static images).
When to use: Screenshot or diagram slide.
Preview
Current intake
Prop Type Notes
title string Required. Slide title.
src string Optional. Image URL (https recommended).
alt string Optional. Image alt text.
children ReactNode Optional. Optional body under the title.
Examples
```
<MediaSlide title="Current intake" src="https://example.com/diagram.png" alt="Process diagram" />
```
<BulletList>
Presentation
Styled bullet list from a string array.
When to use: Agenda, takeaways, or constraints.
Preview
Map the handoffs
Pick two pilots
Measure hours reclaimed
Prop Type Notes
items string[] Required. Bullet strings.
Examples
```
<BulletList items={["Map the handoffs", "Pick two pilots", "Measure hours reclaimed"]} />
```

Prop	Type	Notes
children	ReactNode	Required. Slide content.
className	string	Optional. Extra Tailwind classes on the inner frame.

Prop	Type	Notes
title	string	Required. Main headline.
subtitle	string	Optional. Supporting line under the title.
label	string	Optional. Small uppercase label above the title.

Prop	Type	Notes
title	string	Required. Section title.
kicker	string	Optional. Small line above the title.

Prop	Type	Notes
left	ReactNode	Required. Left column content.
right	ReactNode	Required. Right column content.
reverse	boolean	Optional. Default: `false`. Swap columns on wide screens.

Prop	Type	Notes
children	ReactNode	Required. Quoted text.
attribution	string	Optional. Name.
role	string	Optional. Role or department.

Prop	Type	Notes
label	string	Required. Short label above the value.
value	string	Required. The headline value.
hint	string	Optional. Muted footnote under the value.

Prop	Type	Notes
title	string	Required. Slide title.
src	string	Optional. Image URL (https recommended).
alt	string	Optional. Image alt text.
children	ReactNode	Optional. Optional body under the title.

Prop	Type	Notes
items	string[]	Required. Bullet strings.

<Reveal>

Presentation

Reveals children when the in-deck reveal step reaches fromStep (client).

When to use: Progressive disclosure inside one slide; advance with Space before the next slide.

Preview

First point lands here.

Prop	Type	Notes
fromStep	number	Optional. Default: `0`. Visible when reveal step >= this value.
children	ReactNode	Required. Content to reveal.
tween	object	Optional. Optional GSAP vars for the reveal (subset: opacity, autoAlpha, y, x, duration, ease, delay).

Examples

<Reveal fromStep={0} tween={{ y: 16, opacity: 0, duration: 0.45, ease: "power2.out" }}>
  First point lands here.
</Reveal>

<Stagger>
Presentation
Animates each direct child in sequence on slide enter (client).
When to use: Bullet build without manual Reveal steps.
Preview
One
Two
Prop Type Notes
children ReactNode Required. Typically several `` or `<div>` siblings.
tween object Optional. Per-child from-state vars plus duration, ease, stagger (seconds between children).
Examples
```
<Stagger tween={{ opacity: 0, y: 12, duration: 0.35, stagger: 0.08, ease: "power2.out" }}>
 One
 Two
</Stagger>
```
<SlideTransition>
Presentation
Optional per-slide transition hint for the deck shell.
When to use: Rare override when one slide needs a different transition than the deck default.
Preview
Prop Type Notes
kind "fade" | "slide" | "zoom" | "none" Optional. Default: fade. Transition style into this slide.Values: fade, slide, zoom, none
Examples
```
<SlideTransition kind="slide" />
```

Prop	Type	Notes
children	ReactNode	Required. Typically several `<p>` or `<div>` siblings.
tween	object	Optional. Per-child from-state vars plus duration, ease, stagger (seconds between children).

Prop	Type	Notes
kind	"fade" \| "slide" \| "zoom" \| "none"	Optional. Default: `fade`. Transition style into this slide.Values: fade, slide, zoom, none

<Counter>

Presentation

Animates a number from from to to on slide enter (client).

When to use: Headline metrics on pitch slides.

Preview

0 hrs / week

Prop	Type	Notes
from	number	Optional. Default: `0`. Start value.
to	number	Required. End value.
suffix	string	Optional. Appended after the number.
tween	object	Optional. Optional { duration, ease, delay } for the count.

Examples

<Counter from={0} to={142} suffix=" hrs / week" tween={{ duration: 1.2, ease: "power2.out" }} />

<Highlight>
Presentation
Short emphasis tween on its child wrapper on slide enter (client).
When to use: Draw attention to inline text after it appears.
Preview
Wave 1
Prop Type Notes
children ReactNode Required. Content to emphasise.
tween object Optional. Optional { scale, duration, ease, delay } merged into gsap.from().
Examples
```
<Highlight tween={{ scale: 0.92, duration: 0.5, ease: "back.out(1.7)" }}>
 Wave 1
</Highlight>
```

Prop	Type	Notes
children	ReactNode	Required. Content to emphasise.
tween	object	Optional. Optional { scale, duration, ease, delay } merged into gsap.from().

<RagStatusBoard>

Presentation

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>

Presentation

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>

Presentation

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>
Presentation
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>

Presentation

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>

Presentation

Week-indexed horizontal bars per track; bars scale in on slide enter (client).

When to use: High-level delivery plan when you need a Gantt-style view without external charts.

Preview

Delivery plan

Timeline: week 0 to week 11 (12 weeks)

Build

Sprint 1–2

UAT

Prop	Type	Notes
title	string	Optional. Default: `Delivery plan`. Slide heading.
totalWeeks	number	Optional. Default: `12`. Timeline length; week indices run 0 … totalWeeks - 1.
rows	{ trackLabel: string; segments: { label: string; startWeek: number; durationWeeks: number }[] }[]	Required. Each row is a swimlane; segments are drawn within totalWeeks.
tween	object	Optional. Optional subset for bar tween: duration, ease, stagger, delay (see sanitize allowlist).

Examples

<ProjectGantt
  totalWeeks={12}
  tween={{ duration: 0.55, stagger: 0.07, ease: "power2.out" }}
  rows={[
    {
      trackLabel: "Build",
      segments: [{ label: "Sprint 1–2", startWeek: 0, durationWeeks: 4 }],
    },
    {
      trackLabel: "UAT",
      segments: [{ label: "UAT", startWeek: 3, durationWeeks: 3 }],
    },
  ]}
/>

<AgendaSlide>

Presentation

Numbered agenda list with optional timeboxes; rows stagger in on slide enter (client).

When to use: Use as slide 2 of most decks. Pass three to seven items so the slide stays scannable.

Preview

Today's agenda

01Programme health10 min
02Wave 1 outcomes15 min
03Wave 2 scope20 min
04Decisions and asks10 min

Prop	Type	Notes
title	string	Optional. Default: `Agenda`. Slide heading.
items	{ label: string; timebox?: string }[]	Required. Agenda entries in display order; numbering is added automatically.
tween	object	Optional. Optional GSAP vars (duration, ease, stagger, delay, y, opacity, autoAlpha).

Examples

<AgendaSlide
  title="Today's agenda"
  items={[
    { label: "Programme health", timebox: "10 min" },
    { label: "Wave 1 outcomes", timebox: "15 min" },
    { label: "Wave 2 scope", timebox: "20 min" },
    { label: "Decisions and asks", timebox: "10 min" }
  ]}
/>

<MetricStrip>

Presentation

Compact 3 to 6 KPI tiles in one strip with optional delta chips and RAG dots; tiles stagger in on slide enter (client).

When to use: Use for headline metrics on IC, project, or portfolio slides where each metric needs a one-line label and an optional trend or RAG indicator.

Preview

£412m

AUM

+5.2%

1.8x

MOIC

+0.1x

Holdings

On watch

Prop	Type	Notes
items	{ value: string; label: string; deltaValue?: string; deltaTone?: "up" \| "down" \| "flat"; ragStatus?: "red" \| "amber" \| "green" }[]	Required. Three to six tiles. Pre-format the value string yourself (currency, units).
tween	object	Optional. Optional GSAP vars for the tile entrance.

Examples

<MetricStrip
  items={[
    { value: "£412m", label: "AUM", deltaValue: "+5.2%", deltaTone: "up" },
    { value: "1.8x", label: "MOIC", deltaValue: "+0.1x", deltaTone: "up" },
    { value: "12", label: "Holdings", ragStatus: "green" },
    { value: "3", label: "On watch", ragStatus: "amber" }
  ]}
/>

<ComparisonTiles>

Presentation

Two to four side-by-side comparison tiles (plan vs actual, Q vs Q, base vs stress); tiles stagger in on slide enter (client).

When to use: Use when each metric needs a paired primary and secondary value with an optional delta. Keep copy short; this is a slide, not a table.

Preview

Q3 vs plan

Revenue

Plan

£24m

Actual

£26.4m

+10%

EBITDA

Plan

£4.8m

Actual

£4.2m

-12%

Prop	Type	Notes
title	string	Optional. Optional slide heading above the tiles.
items	{ label: string; primaryValue: string; primaryLabel?: string; secondaryValue: string; secondaryLabel?: string; deltaValue?: string; deltaTone?: "up" \| "down" \| "flat" }[]	Required. Two to four comparison tiles. Each tile shows a primary and secondary value plus an optional delta chip.
tween	object	Optional. Optional GSAP vars for the tile entrance.

Examples

<ComparisonTiles
  title="Q3 vs plan"
  items={[
    { label: "Revenue", primaryLabel: "Plan", primaryValue: "£24m", secondaryLabel: "Actual", secondaryValue: "£26.4m", deltaValue: "+10%", deltaTone: "up" },
    { label: "EBITDA", primaryLabel: "Plan", primaryValue: "£4.8m", secondaryLabel: "Actual", secondaryValue: "£4.2m", deltaValue: "-12%", deltaTone: "down" }
  ]}
/>

<MilestoneTimeline>

Presentation

Compact horizontal milestone timeline with status pins; the spine draws and pins stagger in on slide enter (client).

When to use: Use for a quarter or programme milestone strip (last IC, today, next gate). Lighter than the workshop RoadmapTimeline; three to six milestones is the sweet spot.

Preview

Programme milestones

Mar 2026

Last IC

Jun 2026

Wave 1 live

Sep 2026

Wave 2 scoped

Dec 2026

Year-end review

Prop	Type	Notes
title	string	Optional. Optional slide heading above the timeline.
milestones	{ date: string; label: string; status?: "done" \| "now" \| "next" }[]	Required. Milestones in chronological order. status drives pin colour: done=green, now=amber, next=outline.
tween	object	Optional. Optional GSAP vars for the line and pin entrance.

Examples

<MilestoneTimeline
  title="Programme milestones"
  milestones={[
    { date: "Mar 2026", label: "Last IC", status: "done" },
    { date: "Jun 2026", label: "Wave 1 live", status: "now" },
    { date: "Sep 2026", label: "Wave 2 scoped", status: "next" },
    { date: "Dec 2026", label: "Year-end review", status: "next" }
  ]}
/>

<RiskRowList>

Presentation

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>

Presentation

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>

Presentation

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>

Presentation

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>

Presentation

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>

Presentation

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>

Presentation

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 can be £m or percentages.

Preview

Pro-forma capital structure (£m)

Senior debt80 (48%)
Mezzanine25 (15%)
Equity60 (36%)

Pro-forma at close; excludes upsize option.

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 a unit; only ratios matter.
footnote	string	Optional. Optional small footnote (currency, as-of date, source).
tween	object	Optional. Optional GSAP vars for the segment entrance.

Examples

<CapitalStructureBar
  title="Pro-forma capital structure (£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."
/>

<CovenantHeadroom>

Presentation

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>

Presentation

Waterfall-lite EBITDA / EV bridge: start anchor, signed step columns (positive green, negative red), end anchor; 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.

Preview

EBITDA bridge (£m)

18m

Entry FY24

+4m

Pricing

+3m

Volume

+2m

Cost actions

-1m

26m

Run-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).
unit	string	Optional. Default: `""`. Unit suffix appended to value labels (e.g. "m", "%").
tween	object	Optional. Optional GSAP vars for the column entrance.

Examples

<ValueBridge
  title="EBITDA bridge (£m)"
  unit="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 }}
/>

<ICActionsSince>

Presentation

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>

Presentation

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>

Presentation

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>

Presentation

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>

Presentation

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>

Presentation

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>

Presentation

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

Agenda

Examples

Preview

Automation discovery

Examples

Preview

How work actually flows

Examples

Preview

Examples

Preview

Examples

Preview

Examples

Preview

Current intake

Examples

Preview

Examples

Preview

Examples

Preview

Examples

Preview

Examples

Preview

Examples

Preview

Examples

Preview

Programme health

Examples

Preview

Examples

Preview

Blockers

Asks

Examples

Preview

Next 30 days

Examples

Preview

Deliverables

Examples

Preview

Delivery plan

Examples

Preview

Today's agenda

Examples

Preview

Examples

Preview

Q3 vs plan

Examples

Preview

Programme milestones

Examples

Preview

Risks

Examples

Preview

Examples

Preview

Examples

Preview

Examples

Preview

Deal snapshot

Examples

Preview

Investment thesis

Examples

Preview

Pro-forma capital structure (£m)

Examples

Preview

Covenant headroom

Examples