Component library

Showing 8 components in the finance deck with role list.

<RagStatusBoard>

financeDataListPresentation

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

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

Preview

Programme health

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

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

Examples

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

<BlockersAndAsks>

financeListPresentation

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

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

Preview

Blockers

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

Asks

Confirm Wave 2 scope by Friday
Nominate deputy approver for finance

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

Examples

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

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

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

<RiskRowList>

financeListDataPresentation

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

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

Preview

Risks

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

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

Examples

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

<ThesisBullets>

financeListStatementPresentation

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

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

Preview

Investment thesis

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

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

Examples

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

<ICActionsSince>

financeListDataPresentation

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

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

Preview

Actions since last IC

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

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

Examples

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

<TopMovers>

financeDataListPresentation

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

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

Preview

Top movers

Contributors

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

Detractors

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

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

Examples

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

<WatchlistPanel>

financeListDataPresentation

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

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

Preview

Watchlist

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

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

Examples

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

Preview

Programme health

Examples

Preview

Blockers

Asks

Examples

Preview

Next 30 days

Examples

Preview

Risks

Examples

Preview

Investment thesis

Examples

Preview

Actions since last IC

Examples

Preview

Top movers

Contributors

Detractors

Examples

Preview

Watchlist

Examples