Component library

<Slide>

Presentation

Base slide canvas with padding inside the deck; optional printed-page chrome band.

When to use: Wrap slide body when you do not need a named layout template. Add the chrome props for a masthead/footline treatment (section name top-left, slide tag top-right, deck name + page bottom).

Preview

Part 1

Agenda

Current state03 / 12

Manual hours / week

142

Acme · Automation discoveryConfidential

Prop	Type	Notes
children	ReactNode	Required. Slide content.
className	string	Optional. Extra Tailwind classes on the inner frame.
eyebrow	string	Optional. Chrome label top-left (e.g. section name).
eyebrowRight	string	Optional. Chrome slot top-right, opposite eyebrow (e.g. slide counter).
footerLeft	string	Optional. Chrome line bottom-left (e.g. deck name or date).
footerRight	string	Optional. Chrome line bottom-right, opposite footerLeft (e.g. page label).

Examples

<Slide>
  <TitleSlide label="Part 1" title="Agenda" />
</Slide>

<Slide eyebrow="Current state" eyebrowRight="03 / 12" footerLeft="Acme · Automation discovery" footerRight="Confidential">
  <BigStat label="Manual hours / week" value="142" />
</Slide>

<TitleSlide>

Presentation

Hero title slide with optional small label, subtitle, and either a decorative accent-dot row or a numbered badge circle.

When to use: First slide of a deck or part boundaries. Use `badge` for a magazine-style numbered cover mark instead of `accentDots`.

Preview

Lunnoa

Automation discovery

Workshop outcomes · May 2026

Field Office Quarterly

Index 2026

A field report on the state of things.

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.
accentDots	number	Optional. 1-5 fading accent dots at top-right, opposite the label; a small cover signature mark.
badge	string	Optional. Short text (e.g. "01") in a ringed circle at top-right, opposite the label. Takes priority over accentDots.Example: `01`

Examples

<TitleSlide label="Lunnoa" title="Automation discovery" subtitle="Workshop outcomes · May 2026" accentDots={3} />

<TitleSlide label="Field Office Quarterly" title="Index 2026" subtitle="A field report on the state of things." badge="01" />

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

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.

<QuoteSlide>

Presentation

Large pull quote with attribution and a decorative oversized quotation mark.

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.
mark	boolean	Optional. Default: `true`. Show the large accent-tinted quotation glyph above the quote.

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, optional unit suffix, hint, and a longer description.

When to use: One number that should land emotionally.

Preview

Invoices / month

1,240

AP team, three legal entities

Manual hours

142hrs / week

Across intake, matching, and exception handling.

Prop	Type	Notes
label	string	Required. Short label above the value.
value	string	Required. The headline value.
unit	string	Optional. Short suffix beside the value at a smaller scale (e.g. "%", "hrs / week").
hint	string	Optional. Muted footnote under the value.
description	string	Optional. Longer supporting sentence under hint.

Examples

<BigStat label="Invoices / month" value="1,240" hint="AP team, three legal entities" />

<BigStat label="Manual hours" value="142" unit="hrs / week" description="Across intake, matching, and exception handling." />

<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
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" />
```
<SpeakerNotes>
Presentation
Presenter-only notes attached to a slide. Never rendered visibly to the audience.
When to use: Live-presenting context the deck itself shouldn't say out loud: timing cues, the answer to an anticipated question, which stat to linger on. Place once per slide, usually as the last child. Shown via the deck's in-app notes panel (press "N") and logged to the console on each slide change; plain text only (no other components inside).
Preview
Manual touches
5
per supplier invoice
Prop Type Notes
children ReactNode Required. Presenter notes as plain text (short paragraphs are fine).
Examples
```
<Slide>
 <BigStat label="Manual touches" value="5" hint="per supplier invoice" />
 <SpeakerNotes>
 Pause here. This is the number that got the CFO's attention in the
 kickoff — let it land before moving on.
 </SpeakerNotes>
</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

Prop	Type	Notes
children	ReactNode	Required. Presenter notes as plain text (short paragraphs are fine).

<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

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: RoadmapTimelineMilestoneTimeline

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

<StatBarChart>

Presentation

Vertical column chart with gridlines, per-bar value labels, and an optional legend for grouped series; columns grow in on slide enter (client). Set variant="pixel" for a stacked pixel-cell bar (editorial/print aesthetic) instead of a solid fill.

When to use: A statistics slide comparing real numeric values across categories (not just 0-100 shares like BarRow) — before/after, quarter-over-quarter, or a ranked breakdown with more than one series.

Often with: TrendLineChartBarRowComparisonTiles

Preview

Manual hours per week by team

Baseline measured in workshop week 1

50h37.5h25h12.5h0h

38h

12h

Finance

29h

Operations

21h

BeforeAfter

Reader response, by quarter

Newsletter opens · 2024 Q1 — 2026 Q1

Q1 24

Q2 24

Q1 26

Prop	Type	Notes
title	string	Optional. Optional slide heading above the chart.
description	string	Optional. Optional one-line subtitle under the title.
series	{ label: string; tone?: "brand" \| "neutral" \| "success" \| "warning" \| "error" \| "sky" \| "purple" }[]	Optional. Series metadata aligned by index with each category's `values`. Omit for a single unnamed brand series; the legend only renders with more than one series.
categories	{ label: string; values: number[] }[]	Required. X-axis categories. `values` has one number per series, in the same order as `series`.
unit	string	Optional. Suffix appended to value labels and axis ticks, e.g. "%", "h", "k".
maxValue	number	Optional. Force the axis scale instead of deriving it from the data; useful to keep several charts visually comparable.
gridLines	number	Optional. Default: `4`. Number of horizontal gridlines above zero. Ignored when variant="pixel".
variant	"solid" \| "pixel"	Optional. Default: `solid`. "pixel" draws each bar as a column of small on/off cells instead of one solid rectangle, for a printed-ledger/graph-paper look.Values: solid, pixel
pixelCells	number	Optional. Default: `10`. Number of cells per bar when variant="pixel".
tween	object	Optional. Optional GSAP vars for the column entrance.

Examples

<StatBarChart
  title="Manual hours per week by team"
  description="Baseline measured in workshop week 1"
  unit="h"
  series={[{ label: "Before", tone: "neutral" }, { label: "After", tone: "brand" }]}
  categories={[
    { label: "Finance", values: [38, 12] },
    { label: "Operations", values: [29, 9] },
    { label: "HR", values: [21, 6] }
  ]}
/>

<StatBarChart
  title="Reader response, by quarter"
  description="Newsletter opens · 2024 Q1 — 2026 Q1"
  unit="%"
  variant="pixel"
  categories={[
    { label: "Q1 24", values: [40] },
    { label: "Q2 24", values: [50] },
    { label: "Q1 26", values: [90] }
  ]}
/>

<TrendLineChart>

Presentation

Animated line chart with gridlines, point markers, and an optional legend for multiple series; lines draw in on slide enter (client).

When to use: Show a trend or change over time (weekly/monthly metric, adoption curve, run-rate). Use StatBarChart instead for category comparisons that aren't a time series.

Often with: StatBarChartCounter

Preview

Weekly manual hours, trending down

0h50h100h150h200h

Wk 1Wk 2Wk 3Wk 4Wk 5Wk 6

Prop	Type	Notes
title	string	Optional. Optional slide heading above the chart.
description	string	Optional. Optional one-line subtitle under the title.
xLabels	string[]	Required. X-axis labels (e.g. months or weeks); every series' `values` must have the same length.
series	{ label: string; values: number[]; tone?: "brand" \| "neutral" \| "success" \| "warning" \| "error" \| "sky" \| "purple" }[]	Required. One or more series; the legend only renders with more than one series.
unit	string	Optional. Suffix appended to value labels and axis ticks, e.g. "%", "h", "k".
gridLines	number	Optional. Default: `4`. Number of horizontal gridlines.
tween	object	Optional. Optional GSAP vars for the line-draw and point entrance.

Examples

<TrendLineChart
  title="Weekly manual hours, trending down"
  unit="h"
  xLabels={["Wk 1", "Wk 2", "Wk 3", "Wk 4", "Wk 5", "Wk 6"]}
  series={[
    { label: "Manual hours", values: [142, 138, 121, 98, 76, 60], tone: "brand" }
  ]}
/>

<RuleDivider>
Presentation
Hairline rule, optionally with a small centred uppercase label.
When to use: Separate two stacked blocks within one slide without a full section break.
Preview
Then
Prop Type Notes
label string Optional. Small uppercase label centred on the rule; omit for a plain full-width line.
Examples
```
<RuleDivider />
```
```
<RuleDivider label="Then" />
```
<DropCapLead>
Presentation
Lead paragraph with an oversized accent-coloured first letter, editorial-style.
When to use: Open a narrative-heavy slide (context, background) with a single anchoring paragraph.
Preview
Every customer order today is touched by sales, service, and operations before it ships.
Prop Type Notes
children string Required. The lead paragraph. Plain string only (no nested JSX) so the first character can be split out.
Examples
```
<DropCapLead>Every customer order today is touched by sales, service, and operations before it ships.</DropCapLead>
```

Prop	Type	Notes
label	string	Optional. Small uppercase label centred on the rule; omit for a plain full-width line.

Prop	Type	Notes
children	string	Required. The lead paragraph. Plain string only (no nested JSX) so the first character can be split out.

<ProcessSteps>

Presentation

Horizontal row of 2-5 numbered steps; numbering can be roman, plain two-digit, or a filled accent circle. Cards stagger in on slide enter (client). Pass `tones` to render each step as a filled/outlined card instead of the plain numeral style.

When to use: A method, rollout sequence, or "how it works" walkthrough. Use `tones` (e.g. alternating accent/outline/soft) when the deck's structural reference uses a mixed-fill card per step rather than bare numerals.

Preview

How the pilot runs

Discover

Two workshops, five interviews.

Design

Agree the target flow and owners.

Build

Ship the first automation in a sandbox.

Adopt

Handover with a runbook and metrics.

A simple plan, in four moves

Listen

Structured conversations across teams.

Align

Cluster signals into themes.

Build

Translate themes into a short list of bets.

Ship

Put the work in market on a known cadence.

Prop	Type	Notes
title	string	Optional. Heading above the steps.
steps	{ title: string; description?: string }[]	Required. 2-5 steps in display order.
numbering	"roman" \| "arabic" \| "circle"	Optional. Default: `arabic`. Ordinal treatment: flat roman numeral, flat two-digit number, or a filled accent circle.Values: roman, arabic, circle
tones	("accent" \| "muted" \| "outline" \| "soft")[]	Optional. One fill tone per step, aligned by index (cycles if shorter than `steps`). Renders each step as a card. Omit for the default minimal numeral style.
tween	object	Optional. Optional GSAP vars for the step entrance.

Examples

<ProcessSteps
  title="How the pilot runs"
  numbering="circle"
  steps={[
    { title: "Discover", description: "Two workshops, five interviews." },
    { title: "Design", description: "Agree the target flow and owners." },
    { title: "Build", description: "Ship the first automation in a sandbox." },
    { title: "Adopt", description: "Handover with a runbook and metrics." },
  ]}
/>

<ProcessSteps
  title="A simple plan, in four moves"
  tones={["accent", "soft", "outline", "soft"]}
  steps={[
    { title: "Listen", description: "Structured conversations across teams." },
    { title: "Align", description: "Cluster signals into themes." },
    { title: "Build", description: "Translate themes into a short list of bets." },
    { title: "Ship", description: "Put the work in market on a known cadence." },
  ]}
/>

<TopicGrid>

Presentation

Grid of 3-8 rule-topped topic tiles (no boxes); tiles stagger in on slide enter (client).

When to use: Overview of themes, workstreams, or focus areas at the start of a section.

Preview

What we looked at

Order intake

Five inboxes, no queue of record.

Supplier invoices

Manual three-way match.

HR triage

38 minutes per request.

Prop	Type	Notes
title	string	Optional. Heading above the grid.
topics	{ label: string; description?: string }[]	Required. 3-8 tiles in display order.
columns	2 \| 3 \| 4	Optional. Default: `3`. Grid column count.Values: 2, 3, 4
tween	object	Optional. Optional GSAP vars for the tile entrance.

Examples

<TopicGrid
  title="What we looked at"
  columns={3}
  topics={[
    { label: "Order intake", description: "Five inboxes, no queue of record." },
    { label: "Supplier invoices", description: "Manual three-way match." },
    { label: "HR triage", description: "38 minutes per request." },
  ]}
/>

<StatusMatrix>

Presentation

Readiness/RACI-style matrix: row labels down the side, status dots across named columns.

When to use: Show readiness or ownership across several workstreams and stages at once.

Preview

Rollout readiness

DiscoveryDesignBuildLaunchFinanceOperationsHR

Prop	Type	Notes
title	string	Optional. Heading above the matrix.
columns	string[]	Required. Column headers (e.g. stages or phases).
rows	{ label: string; states: ("done" \| "inprogress" \| "planned" \| "blocked" \| null)[] }[]	Required. One row per item; states array must match columns length (use null for not applicable).

Examples

<StatusMatrix
  title="Rollout readiness"
  columns={["Discovery", "Design", "Build", "Launch"]}
  rows={[
    { label: "Finance", states: ["done", "done", "inprogress", "planned"] },
    { label: "Operations", states: ["done", "inprogress", "planned", "planned"] },
    { label: "HR", states: ["done", "planned", null, null] },
  ]}
/>

<SpecList>

Presentation

Rule-topped label/value definition list, for specs, meta, or a compact fact sheet.

When to use: A short list of facts (scope, dates, owners, constraints) that does not need a full table.

Preview

Engagement

Client: Acme Corp
Sponsor: COO
Duration: 6 weeks
Scope: Finance + Ops

Prop	Type	Notes
title	string	Optional. Heading above the list.
items	{ label: string; value: string }[]	Required. Label/value pairs in display order.
columns	1 \| 2	Optional. Default: `1`. Lay items out in one or two columns.Values: 1, 2

Examples

<SpecList
  title="Engagement"
  columns={2}
  items={[
    { label: "Client", value: "Acme Corp" },
    { label: "Sponsor", value: "COO" },
    { label: "Duration", value: "6 weeks" },
    { label: "Scope", value: "Finance + Ops" },
  ]}
/>

<BarRow>

Presentation

Horizontal percentage bars that fill in on slide enter (client).

When to use: A ranked list, share breakdown, or adoption/completion comparison across a handful of items.

Preview

Automation coverage by team

Finance72%

Operations54%

HR31%

Prop	Type	Notes
title	string	Optional. Heading above the bars.
items	{ label: string; value: number; display?: string }[]	Required. value is 0-100 for the fill width; display overrides the default "value%" text.
tween	object	Optional. Optional GSAP vars for the fill animation (duration, ease, stagger, delay).

Examples

<BarRow
  title="Automation coverage by team"
  items={[
    { label: "Finance", value: 72 },
    { label: "Operations", value: 54 },
    { label: "HR", value: 31 },
  ]}
/>

<PixelGlitch>

Presentation

Decorative stair-stepped column of vertical scanline blocks, tinted with the deck's accent colour. Purely ornamental and aria-hidden.

When to use: A quiet graphic accent in a slide corner for an editorial/design-research deck — echoes a printed-zine or graph-paper motif. Use sparingly, at most once or twice per deck. Place as a direct child of <Slide> (its root is position: relative) so the absolute positioning anchors correctly.

Preview

Prop	Type	Notes
position	"top-right" \| "top-left" \| "bottom-right" \| "bottom-left" \| "right" \| "left"	Optional. Default: `top-right`. Which edge of the slide the stair column hugs.Values: top-right, top-left, bottom-right, bottom-left, right, left
bars	number	Optional. Default: `8`. Number of stacked stair steps.
seed	number	Optional. Default: `1`. Seed for the deterministic stair-width pattern; change it for a different arrangement.
opacity	number	Optional. Default: `0.85`. Overall opacity of the motif (0-1).

Examples

<PixelGlitch position="top-right" bars={8} />

<IndexList>

Presentation

Numbered index of 4-8 entries in a hairline-divided two-column grid; rows stagger in on slide enter (client).

When to use: An editorial "contents" or "trends at a glance" page — several short titled entries read together, not a left-to-right sequence (use ProcessSteps for that).

Often with: ProcessStepsTopicGridAgendaSlide

Preview

The index, in six entries

Spring 2026 · selected trends

01.

Slow software

Tools that opt out of the urgency contest by default.

02.

Domestic interfaces

Screens designed to live in living rooms.

03.

Hand-set print again

A return to letterpress and small-edition print.

04.

Receipts and ledgers

Information designed to be filed, not consumed.

Prop	Type	Notes
title	string	Optional. Heading above the list.
eyebrow	string	Optional. Small label opposite the title (e.g. "Spring 2026 · selected trends").
entries	{ title: string; description?: string }[]	Required. 4-8 entries in display order.
columns	1 \| 2	Optional. Default: `2`. Grid column count.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<IndexList
  title="The index, in six entries"
  eyebrow="Spring 2026 · selected trends"
  entries={[
    { title: "Slow software", description: "Tools that opt out of the urgency contest by default." },
    { title: "Domestic interfaces", description: "Screens designed to live in living rooms." },
    { title: "Hand-set print again", description: "A return to letterpress and small-edition print." },
    { title: "Receipts and ledgers", description: "Information designed to be filed, not consumed." },
  ]}
/>

<Ledger>

Presentation

Dense numbered ledger/trend table with a name, description, status tag, and a directional delta per row; rows stagger in on slide enter (client).

When to use: A printed-ledger reading of several tracked items with a change indicator (trend report, KPI review, watchlist) — denser than DataTable's dashboard styling and presentation-native.

Often with: StatusMatrixRiskRowListTopMovers

Preview

Trend ledger, in long

All eight · with our reading on each

No.ItemReadingStatusChange

01.Slow softwareTools that opt out of urgency by default.Quiet · welcomed↑ 14 pts

02.Domestic interfacesScreens designed to live in living rooms.Warm · ambient↑ 9 pts

03.Quietly weird typeDisplay faces with one slightly off detail.Curious · alert— flat

Prop	Type	Notes
title	string	Optional. Heading above the table.
eyebrow	string	Optional. Small label opposite the title.
columnLabels	[string, string, string, string, string]	Optional. Default: `["No.", "Item", "Reading", "Status", "Change"]`. Header labels, in column order.
rows	{ name: string; description?: string; tag?: string; delta?: string; deltaDirection?: "up" \| "down" \| "flat" }[]	Required. Ledger rows in display order. deltaDirection colours the delta and picks the arrow glyph.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<Ledger
  title="Trend ledger, in long"
  eyebrow="All eight · with our reading on each"
  rows={[
    { name: "Slow software", description: "Tools that opt out of urgency by default.", tag: "Quiet · welcomed", delta: "14 pts", deltaDirection: "up" },
    { name: "Domestic interfaces", description: "Screens designed to live in living rooms.", tag: "Warm · ambient", delta: "9 pts", deltaDirection: "up" },
    { name: "Quietly weird type", description: "Display faces with one slightly off detail.", tag: "Curious · alert", delta: "flat", deltaDirection: "flat" },
  ]}
/>

<AgendaGrid>

Presentation

Asymmetric agenda grid: one optional featured tile spanning two rows beside several mixed-fill topic tiles; tiles stagger in on slide enter (client).

When to use: A magazine-contents-style agenda or topic overview where one lead topic deserves visual weight — richer than the plain numbered AgendaSlide list.

Often with: AgendaSlideTopicGridDeliverableGrid

Preview

Agenda

Five topics · ninety minutes

Where we stand today.

Context on the current process.

Context

The big shift.

Insight

By the numbers.

Data

How we'll get there.

Plan

What it adds up to.

Outcomes

Prop	Type	Notes
title	string	Optional. Heading above the grid.
eyebrow	string	Optional. Small label opposite the title.
items	{ title: string; description?: string; tag?: string; tone?: "accent" \| "accentMuted" \| "outline" \| "soft"; featured?: boolean }[]	Required. Tiles in display order. Mark at most one item featured (spans two rows, larger type). tone defaults to a cycling accent/soft/outline/accentMuted pattern.
columns	2 \| 3	Optional. Default: `3`. Grid column count.
tween	object	Optional. Optional GSAP vars for the tile entrance.

Examples

<AgendaGrid
  title="Agenda"
  eyebrow="Five topics · ninety minutes"
  items={[
    { title: "Where we stand today.", description: "Context on the current process.", tag: "Context", tone: "accent", featured: true },
    { title: "The big shift.", tag: "Insight", tone: "accentMuted" },
    { title: "By the numbers.", tag: "Data", tone: "soft" },
    { title: "How we'll get there.", tag: "Plan", tone: "outline" },
    { title: "What it adds up to.", tag: "Outcomes", tone: "soft" },
  ]}
/>

<Pyramid>

Presentation

Tapering stack of 3-6 levels, apex first — a maturity, hierarchy, or "foundation up" diagram; bars grow in on slide enter (client).

When to use: A hierarchy or maturity model that reads bottom-up (foundational capabilities at the base, the outcome at the apex) — an alternative to MaturityRadar/MaturityHeatmap for a single-track model.

Often with: MaturityRadarMaturityHeatmapCycleDiagram

Preview

What good looks like

Outcomes

Measurable business impact.

Adoption

Teams using the workflow daily.

Process

A documented, owned process.

Data foundation

Clean, accessible source data.

Prop	Type	Notes
title	string	Optional. Heading above the pyramid.
levels	{ label: string; description?: string }[]	Required. 3-6 levels ordered apex (narrowest, index 0) to base (widest, last).
tween	object	Optional. Optional GSAP vars for the bar entrance.

Examples

<Pyramid
  title="What good looks like"
  levels={[
    { label: "Outcomes", description: "Measurable business impact." },
    { label: "Adoption", description: "Teams using the workflow daily." },
    { label: "Process", description: "A documented, owned process." },
    { label: "Data foundation", description: "Clean, accessible source data." },
  ]}
/>

<CycleDiagram>

Presentation

Horizontal sequence of 3-6 steps that loops back to the start; nodes and connecting arrows stagger in on slide enter (client).

When to use: A repeating process (plan-do-check-act, a review cadence, an operating rhythm) — use ProcessSteps instead for a one-off sequence that doesn't repeat.

Often with: ProcessStepsPyramid

Preview

The weekly operating rhythm

Plan

Set the week's top three priorities.

Execute

Ship against the plan daily.

Review

Friday retro against the plan.

Adjust

Carry learnings into next week's plan.

Repeats from step 1

Prop	Type	Notes
title	string	Optional. Heading above the diagram.
steps	{ title: string; description?: string }[]	Required. 3-6 steps in cycle order.
tween	object	Optional. Optional GSAP vars for the node/arrow entrance.

Examples

<CycleDiagram
  title="The weekly operating rhythm"
  steps={[
    { title: "Plan", description: "Set the week's top three priorities." },
    { title: "Execute", description: "Ship against the plan daily." },
    { title: "Review", description: "Friday retro against the plan." },
    { title: "Adjust", description: "Carry learnings into next week's plan." },
  ]}
/>

<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 milestone timeline with status pins; the spine draws and pins stagger in on slide enter (client). Horizontal by default; set orientation="vertical" for a taller spine with room for longer labels.

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. Switch to vertical when you have more than six milestones or labels that need more than a few words.

Preview

Programme milestones

Mar 2026

Last IC

Jun 2026

Wave 1 live

Sep 2026

Wave 2 scoped

Dec 2026

Year-end review

How we'll get there

Weeks 1-2

Listen: structured conversations across teams.

Week 3

Align: cluster signals into themes.

Weeks 4-6

Build: translate themes into a short list of bets.

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.
orientation	"horizontal" \| "vertical"	Optional. Default: `horizontal`. "vertical" renders a top-to-bottom spine instead of the compact left-to-right row.Values: horizontal, vertical
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" }
  ]}
/>

<MilestoneTimeline
  orientation="vertical"
  title="How we'll get there"
  milestones={[
    { date: "Weeks 1-2", label: "Listen: structured conversations across teams.", status: "done" },
    { date: "Week 3", label: "Align: cluster signals into themes.", status: "now" },
    { date: "Weeks 4-6", label: "Build: translate themes into a short list of bets.", 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

Index 2026

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

Examples

Preview

Programme health

Examples

Preview

Examples

Preview

Blockers

Asks

Examples

Preview

Next 30 days

Examples

Preview

Deliverables

Examples

Preview

Delivery plan

Examples

Preview

Manual hours per week by team

Reader response, by quarter

Examples

Preview

Weekly manual hours, trending down

Examples

Preview

Examples

Preview

Examples

Preview

How the pilot runs

A simple plan, in four moves

Examples

Preview

What we looked at

Examples

Preview

Rollout readiness

Examples

Preview

Engagement

Examples

Preview

Automation coverage by team

Examples

Preview

Examples