Component library

Showing 14 components with role chart.

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

<StatBarChart>

coreChartPresentation

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

<MaturityRadar>

coreChartContentPresentation

Radar chart of maturity dimensions with optional target overlay; uses slide theming and fades in on slide enter (client).

When to use: Workshop or IC slide for multi-dimensional capability assessment (automation maturity, operating model, SEO pillars). Prefer over StatBarChart when scores are comparable across axes on a 1–5 scale.

Often with: StatBarChartStatusMatrixPyramidTopicGrid

Preview

Automation maturity — current vs. 6-month target

Scores from stakeholder interviews (1 = ad hoc, 5 = optimised).

CurrentTarget

Prop	Type	Notes
dimensions	string[]	Required. Axis labels, in order.
current	number[]	Required. Current scores, same order as dimensions.
target	number[]	Optional. Optional target scores, drawn as a dashed overlay.
max	number	Optional. Default: `5`. Maximum value on the radial axis.
title	string	Optional. Slide heading above the chart.
description	string	Optional. Subtitle or methodology note.
tween	object	Optional. Optional GSAP vars for chart entrance.

Examples

<MaturityRadar
  dimensions={["Data quality", "Tooling", "Process clarity", "Governance", "Automation skills"]}
  current={[3, 2, 3, 2, 2]}
  target={[4, 4, 4, 4, 3]}
  title="Automation maturity — current vs. 6-month target"
  description="Scores from stakeholder interviews (1 = ad hoc, 5 = optimised)."
/>

<MaturityHeatmap>

coreChartContentDataPresentation

Stage-based maturity grid (rows = dimensions, columns = levels) with current and optional target highlights; rows stagger in on slide enter (client).

When to use: Workshop slide when maturity is stage-based (CMMI-style levels) rather than numeric scores. Pair with MaturityRadar only when both views add value; usually pick one.

Often with: MaturityRadarStatusMatrixPyramid

Preview

Maturity stages — current vs. 6-month target

Workshop assessment, May 2026.

Dimension	Ad hoc	Repeatable	Defined	Managed
Data quality			●	○
Tooling		●		○
Process clarity			●	○
Governance	●		○

CurrentTarget

Prop	Type	Notes
rows	string[]	Required. Row labels (dimensions).
columns	string[]	Required. Column labels (maturity levels).
current	boolean[][]	Required. 2D array [row][col]. Each row should have at most one true cell.
target	boolean[][]	Optional. Optional target cells, drawn as a ring.
title	string	Optional. Slide heading above the grid.
description	string	Optional. Subtitle or methodology note.
tween	object	Optional. Optional GSAP vars for row entrance.

Examples

<MaturityHeatmap
  rows={["Data quality", "Tooling", "Process clarity", "Governance"]}
  columns={["Ad hoc", "Repeatable", "Defined", "Managed", "Optimised"]}
  current={[
    [false, false, true, false, false],
    [false, true, false, false, false],
    [false, false, true, false, false],
    [true, false, false, false, false]
  ]}
  target={[
    [false, false, false, true, false],
    [false, false, false, true, false],
    [false, false, false, true, false],
    [false, false, true, false, false]
  ]}
  title="Maturity stages — current vs. 6-month target"
  description="Workshop assessment, May 2026."
/>

<OpportunityMatrix>

coreChartCompareContentPresentation

Effort × impact scatter with quadrant guides and optional category tabs; chart fades in on slide enter (client).

When to use: Use-case portfolio slide before a UseCaseGrid or roadmap. Top-left (low effort, high impact) is the quick-win zone. Keep to 6–12 dots for readability.

Often with: MaturityRadarComparisonTilesUseCaseGridStatBarChart

Preview

Twelve use cases scored on effort and impact

Workshop prioritisation, 1 = low and 5 = high on each axis.

FinanceOperationsPeopleSales

Prop	Type	Notes
items	{ name: string; effort: number; impact: number; category?: string }[]	Required. Each item is plotted as a dot. effort and impact are 1–5.
title	string	Optional. Slide heading.
description	string	Optional. Subtitle or scoring note.
tabs	{ id: string; label: string }[]	Optional. Optional filter tabs. Include `{ id: "all", label: "All" }` first. Other tab ids slug-match `tabFilterKey` on each item.
tabFilterKey	"category" \| "name"	Optional. Default: `category`. Which item field tab ids match after slugify.Values: category, name
tween	object	Optional. Optional GSAP vars for chart entrance.

Examples

<OpportunityMatrix
  title="Twelve use cases scored on effort and impact"
  description="Workshop prioritisation, 1 = low and 5 = high on each axis."
  items={[
    { name: "Supplier invoice intake", effort: 2, impact: 5, category: "Finance" },
    { name: "Order acknowledgements", effort: 2, impact: 4, category: "Operations" },
    { name: "HR ticket triage", effort: 1, impact: 3, category: "People" },
    { name: "Contract renewal alerts", effort: 3, impact: 4, category: "Sales" }
  ]}
/>

<TrendLineChart>

coreChartPresentation

Animated line or combo bar-and-line chart with gridlines, multiple series, optional dual Y-axes, and a legend; draws in on slide enter (client). Presentation decks only (`kind: "presentation"`).

When to use: Slide decks: trends over time with one or more series. Set `type="bar"` on a series for columns; `yAxis="right"` for a secondary scale (e.g. revenue bars + margin % line). For document reports use `<TrendChart>` instead. Use `<StatBarChart>` for non-time category comparisons.

Often with: StatBarChartCounterColumnChartSlideTrendChart

Preview

Weekly manual hours, trending down

0h50h100h150h200h

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

Manual hours (h)Target (h)

Operating metrics

Revenue and margin

0m12.5m25m37.5m50m

0%10%20%30%40%

Q1Q2Q3Q4

Revenue (m)EBITDA margin (%) · right axis

Prop	Type	Notes
label	string	Optional. Optional eyebrow label above the title.
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"; type?: "line" \| "bar"; yAxis?: "left" \| "right"; unit?: string }[]	Required. One or more series. Set `type="bar"` for columns; `yAxis="right"` for the secondary axis.
unit	string	Optional. Default unit suffix for the left axis and series without their own `unit`.
yAxes	{ left?: { unit?: string; maxValue?: number; minValue?: number }; right?: { unit?: string; maxValue?: number; minValue?: number } }	Optional. Per-axis unit and scale overrides for dual-axis charts.
gridLines	number	Optional. Default: `4`. Number of horizontal gridlines (left-axis scale).
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" },
    { label: "Target", values: [120, 115, 100, 80, 60, 45], tone: "neutral" }
  ]}
/>

<TrendLineChart
  label="Operating metrics"
  title="Revenue and margin"
  xLabels={["Q1", "Q2", "Q3", "Q4"]}
  yAxes={{ left: { unit: "m" }, right: { unit: "%", maxValue: 40 } }}
  series={[
    { label: "Revenue", type: "bar", values: [18, 22, 24, 26], tone: "brand", unit: "m" },
    { label: "EBITDA margin", type: "line", yAxis: "right", values: [22, 24, 25, 27], tone: "success", unit: "%" }
  ]}
/>

<BarRow>

coreChartPresentation

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

<CapitalStructureBar>

financeChartDataPresentation

Stacked horizontal bar of capital structure tiers (senior, mezz, equity) with proportional widths; segments scale in on slide enter (client).

When to use: Use to show the financing stack on IC or refinancing slides. Two to five tiers; numeric values share one currency and scale.

Preview

Pro-forma capital structure

Senior debt£80m (48%)
Mezzanine£25m (15%)
Equity£60m (36%)

Pro-forma at close; excludes upsize option.

Pro-forma capital structure

Senior debt$120m (59%)
Equity$85m (41%)

Prop	Type	Notes
title	string	Optional. Default: `Capital structure`. Slide heading.
tiers	{ label: string; value: number; tone?: "brand" \| "neutral" \| "success" \| "warning" \| "error" }[]	Required. Tiers in stack order (typically senior at the left). Values share currency and scale; only ratios matter for bar widths.
currency	"GBP" \| "USD" \| "EUR" \| "CHF" \| "JPY" \| "none"	Optional. Default: `GBP`. Currency code for tier value labels.Values: GBP, USD, EUR, CHF, JPY, none
scale	"m" \| "bn" \| "k" \| "none"	Optional. Default: `m`. Magnitude suffix appended to tier values (e.g. m for millions).Values: m, bn, k, none
footnote	string	Optional. Optional small footnote (as-of date, source, caveats).
tween	object	Optional. Optional GSAP vars for the segment entrance.

Examples

<CapitalStructureBar
  title="Pro-forma capital structure"
  currency="GBP"
  scale="m"
  tiers={[
    { label: "Senior debt", value: 80, tone: "brand" },
    { label: "Mezzanine", value: 25, tone: "neutral" },
    { label: "Equity", value: 60, tone: "success" }
  ]}
  footnote="Pro-forma at close; excludes upsize option."
/>

<CapitalStructureBar
  title="Pro-forma capital structure"
  currency="USD"
  scale="m"
  tiers={[
    { label: "Senior debt", value: 120, tone: "brand" },
    { label: "Equity", value: 85, tone: "success" }
  ]}
/>

<CovenantHeadroom>

financeDataChartPresentation

Covenant compliance grid with limit, headroom, and status chip per row; rows stagger in on slide enter (client).

When to use: Use on quarterly portfolio company review slides. Keep to two to four covenants.

Preview

Covenant headroom

CovenantLimitHeadroomStatus

Net leverage≤ 5.5x0.8xOK

Interest cover≥ 2.5x0.3xWatch

Capex cap£12m£1.4mWatch

Prop	Type	Notes
title	string	Optional. Default: `Covenant headroom`. Slide heading.
rows	{ covenant: string; limit: string; headroom: string; status: "ok" \| "watch" \| "breach" }[]	Required. Covenant rows; status drives the chip colour.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<CovenantHeadroom
  rows={[
    { covenant: "Net leverage", limit: "≤ 5.5x", headroom: "0.8x", status: "ok" },
    { covenant: "Interest cover", limit: "≥ 2.5x", headroom: "0.3x", status: "watch" },
    { covenant: "Capex cap", limit: "£12m", headroom: "£1.4m", status: "watch" }
  ]}
/>

<ValueBridge>

financeChartPresentation

Waterfall-lite EBITDA / EV bridge: start anchor, signed step columns (positive green, negative red), end anchor, with horizontal gridlines and a Y-axis; columns scale up on slide enter (client).

When to use: Use to walk the committee through value creation drivers. Four to six steps reads cleanly; more becomes noise on a slide. All values share one currency and scale.

Preview

EBITDA bridge

£18m

+£4m

+£3m

+£2m

-£1m

£26m

Entry FY24PricingVolumeCost actionsFXRun-rate FY26

EBITDA bridge

$18m

+$4m

+$3m

$26m

Entry FY24PricingVolumeRun-rate FY26

Prop	Type	Notes
title	string	Optional. Default: `Value bridge`. Slide heading.
start	{ label: string; value: number }	Required. Left anchor (e.g. entry EBITDA).
steps	{ label: string; delta: number }[]	Required. Sequence of signed deltas. Each step is one column.
end	{ label: string; value: number }	Required. Right anchor (e.g. current or projected EBITDA).
currency	"GBP" \| "USD" \| "EUR" \| "CHF" \| "JPY" \| "none"	Optional. Default: `GBP`. Currency code for value labels.Values: GBP, USD, EUR, CHF, JPY, none
scale	"m" \| "bn" \| "k" \| "none"	Optional. Default: `m`. Magnitude suffix appended to values (e.g. m for millions).Values: m, bn, k, none
gridLines	number	Optional. Default: `4`. Number of horizontal gridlines on the plot (including top and bottom).
tween	object	Optional. Optional GSAP vars for the column entrance.

Examples

<ValueBridge
  title="EBITDA bridge"
  currency="GBP"
  scale="m"
  start={{ label: "Entry FY24", value: 18 }}
  steps={[
    { label: "Pricing", delta: 4 },
    { label: "Volume", delta: 3 },
    { label: "Cost actions", delta: 2 },
    { label: "FX", delta: -1 }
  ]}
  end={{ label: "Run-rate FY26", value: 26 }}
/>

<ValueBridge
  title="EBITDA bridge"
  currency="USD"
  scale="m"
  start={{ label: "Entry FY24", value: 18 }}
  steps={[{ label: "Pricing", delta: 4 }, { label: "Volume", delta: 3 }]}
  end={{ label: "Run-rate FY26", value: 26 }}
/>

<ExposureDonutRow>

financeChartDataPresentation

Side-by-side donut small multiples (sector, geography, vintage); donut arcs draw and rows stagger in on slide enter (client).

When to use: Use for a portfolio exposure slide where two to four breakdowns sit side by side. Keep each donut to three to five segments.

Preview

Portfolio exposure

Sector

Healthcare38%
Software27%
Industrials20%
Consumer15%

Geography

UK45%
EU32%
North America23%

Vintage

202218%
202330%
202435%
202517%

Prop	Type	Notes
title	string	Optional. Optional slide heading.
groups	{ label: string; segments: { name: string; value: number }[] }[]	Required. Two to four donut groups. value is a numeric weight; percentages are derived.
tween	object	Optional. Optional GSAP vars for the donut and row entrance.

Examples

<ExposureDonutRow
  title="Portfolio exposure"
  groups={[
    { label: "Sector", segments: [
      { name: "Healthcare", value: 38 },
      { name: "Software", value: 27 },
      { name: "Industrials", value: 20 },
      { name: "Consumer", value: 15 }
    ] },
    { label: "Geography", segments: [
      { name: "UK", value: 45 },
      { name: "EU", value: 32 },
      { name: "North America", value: 23 }
    ] },
    { label: "Vintage", segments: [
      { name: "2022", value: 18 },
      { name: "2023", value: 30 },
      { name: "2024", value: 35 },
      { name: "2025", value: 17 }
    ] }
  ]}
/>

<ColumnChartSlide>

expressiveChartPresentation

Vertical bar chart for comparing categories on a 0–100 scale; bars animate in on slide enter (client).

When to use: Quarterly KPIs, segment growth, or survey scores where each bar is an independent category. Prefer StatBarChart when you need multi-series report charts.

Preview

Analytics Core

Quarterly Growth Metrics

Fiscal performance across four sectors

Alpha

Beta

Gamma

Delta

Epsilon

Prop	Type	Notes
label	string	Optional. HUD pill above the title.
title	string	Optional. Section headline (cyan).
subtitle	string	Optional. Mono pink subtitle under the title.
items	{ label: string; value: number; display?: string; tone?: "cyan" \| "pink" \| "yellow" }[]	Required. Bars; value is 0–100 height percentage.
tween	object	Optional. Optional GSAP vars for bar growth.

Examples

<ColumnChartSlide
  label="Analytics Core"
  title="Quarterly Growth Metrics"
  subtitle="Fiscal performance across four sectors"
  items={[
    { label: "Alpha", value: 78 },
    { label: "Beta", value: 92 },
    { label: "Gamma", value: 64 },
    { label: "Delta", value: 85 },
    { label: "Epsilon", value: 56 }
  ]}
/>

<RankedBarSlide>

expressiveChartPresentation

Horizontal ranked bar chart for share or allocation breakdown; fills animate in on slide enter (client).

When to use: Budget allocation, capacity mix, or portfolio weight by line item. Each row is one label with a 0–100 fill percentage.

Preview

System Load

Resource Allocation

Percentage distribution across operational units

Compute

88%

Storage

72%

Network

95%

Memory

61%

Graphics

44%

Prop	Type	Notes
label	string	Optional. HUD pill above the title.
title	string	Optional. Section headline.
subtitle	string	Optional. Supporting line under the title.
labelAccent	"yellow" \| "cyan" \| "pink"	Optional. Default: `yellow`. AccentEyebrow text colour.Values: yellow, cyan, pink
items	{ label: string; value: number; display?: string; tone?: "navy" \| "cyan" \| "pink" }[]	Required. Rows; value is 0–100 fill percentage.
tween	object	Optional. Optional GSAP vars for fill growth.

Examples

<RankedBarSlide
  label="System Load"
  title="Resource Allocation"
  subtitle="Percentage distribution across operational units"
  items={[
    { label: "Compute", value: 88 },
    { label: "Storage", value: 72 },
    { label: "Network", value: 95 },
    { label: "Memory", value: 61 },
    { label: "Graphics", value: 44 }
  ]}
/>

<BroadsideChart>

broadsideChartPresentation

Vertical bar chart with optional accent bar.

When to use: Simple comparative bars.

Preview

share of voice

Prop	Type	Notes
chromeLeft	string	Optional. Top chrome left.
chromeRight	string	Optional. Top chrome right.
title	string	Optional. Headline.
items	array	Required. [{ label, value 0–100, accent? }].
footLeft	string	Optional. Footer left.
footRight	string	Optional. Footer right.

Examples

<BroadsideChart title="share of voice" items={[{ label: "Us", value: 72, accent: true }, { label: "A", value: 48 }, { label: "B", value: 35 }]} />