Component library

Showing 8 components with role stats.

<BigStat>

coreStatsPresentation

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

<Counter>

sharedMotionStatsPresentation

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

<BurnRunway>

financeStatsChartPresentation

Three-up summary for cash on hand, runway, and optional next milestone.

When to use: Steering updates, IC memos, or founder-style project finance snapshots.

Preview

Cash

£2.4m

Runway

14 months

Next gate

Series A data room · Aug

Prop	Type	Notes
cashLabel	string	Optional. Default: `Cash`. Label above cash figure.
cashValue	string	Required. Cash headline (include currency).
runwayLabel	string	Optional. Default: `Runway`. Label above runway figure.
runwayValue	string	Required. Runway headline (e.g. months or date).
milestoneLabel	string	Optional. Third column label; omit with milestoneValue to hide the column.
milestoneValue	string	Optional. Third column value when both milestone props are set.

Examples

<BurnRunway
  cashValue="£2.4m"
  runwayValue="14 months"
  milestoneLabel="Next gate"
  milestoneValue="Series A data room · Aug"
/>

<MetricStrip>

coreStatsPresentation

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

<DealSnapshot>

financeDataStatsPresentation

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

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

Preview

Deal snapshot

CompanyLumen Health

SectorHealthcare services

GeographyUK and Ireland

EntryAug 2024

Hold period4-6 years

InstrumentCommon equity

Ticket£42m

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

Examples

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

<NAVSummaryCard>

financeStatsDataPresentation

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

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

Preview

NAV summary

As of 30 Apr 2026

NAV

£412.6m

+1.8% MTD

MTD+1.8%

QTD+4.2%

vs benchmark+90 bps

Cash drag-12 bps

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

Examples

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

<MetricPanelSlide>

expressiveStatsPresentation

Grid of two to four headline metrics with labels; tiles stagger in on slide enter (client).

When to use: Platform vitals, portfolio KPIs, or campaign scorecard at a glance. Pre-format values as strings (currency, %, counts).

Preview

Live Telemetry

Platform Vitals

Real-time aggregate figures from active deployments

2.4k

Active Worlds

98M

Pixels Rendered

99.9%

Uptime Score

Max Resolution

Prop	Type	Notes
label	string	Optional. HUD pill above the title.
title	string	Optional. Section headline (cyan).
description	string	Optional. Supporting line under the title.
stats	{ value: string; label: string }[]	Required. Stat tiles (2–4).
tween	object	Optional. Optional GSAP vars for tile entrance.

Examples

<MetricPanelSlide
  label="Live Telemetry"
  title="Platform Vitals"
  description="Real-time aggregate figures from active deployments"
  stats={[
    { value: "2.4k", label: "Active Worlds" },
    { value: "98M", label: "Pixels Rendered" },
    { value: "99.9%", label: "Uptime Score" },
    { value: "4K", label: "Max Resolution" }
  ]}
/>

<BroadsideStats>

broadsideStatsPresentation

Three top-bordered stat cards with accent numerals.

When to use: KPI strip in editorial voice.

Preview

Numbers05

87%

Retention

YoY

Markets

4.2×

Pipeline

Prop	Type	Notes
chromeLeft	string	Optional. Top chrome left.
chromeRight	string	Optional. Top chrome right.
title	string	Optional. Optional headline.
stats	array	Required. [{ value, label, note? }].
footLeft	string	Optional. Footer left.
footRight	string	Optional. Footer right.

Examples

<BroadsideStats chromeLeft="Numbers" chromeRight="05" stats={[{ value: "87%", label: "Retention", note: "YoY" }, { value: "12", label: "Markets" }, { value: "4.2×", label: "Pipeline" }]} />