Component library

Showing 3 components in the core deck with role data.

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

<StatusMatrix>

coreContentDataPresentation

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

<Ledger>

coreDataListPresentation

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