Component library

Showing 6 components in the core deck with role chart.

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