Component library

Showing 15 components in the core deck with role content.

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

<RoadmapTimeline>

coreTimelineAgendaContentPresentation

Vertical phased roadmap with status icons (done, active, planned), time chips, and milestone bullets; phases stagger in on slide enter (client).

When to use: Closing or delivery slide after use cases are agreed. Three to five phases reads cleanly on a 16:9 canvas.

Often with: OpportunityMatrixProcessStepsChronologySlideAgendaSlide

Preview

Wave 1 — 12-week delivery

Sequenced after workshop sign-off.

Phase 1 — Foundation
Weeks 1–3
- ERP middleware exposed
- Lunnoa platform deployed
Phase 2 — Build the three flows
Weeks 4–8
- HR triage live week 5
- Invoice intake live week 8
Phase 3 — Scale and govern
Weeks 9–12
- Second-wave backlog triage
- Usage and ROI review

Prop	Type	Notes
phases	{ label: string; when: string; status?: 'done' \| 'active' \| 'planned'; items?: string[] }[]	Required. Phases in chronological order.
title	string	Optional. Slide heading.
description	string	Optional. Subtitle or delivery note.
tween	object	Optional. Optional GSAP vars for phase entrance.

Examples

<RoadmapTimeline
  title="Wave 1 — 12-week delivery"
  description="Sequenced after workshop sign-off."
  phases={[
    { label: "Phase 1 — Foundation", when: "Weeks 1–3", status: "active", items: ["ERP middleware exposed", "Lunnoa platform deployed"] },
    { label: "Phase 2 — Build the three flows", when: "Weeks 4–8", status: "planned", items: ["HR triage live week 5", "Invoice intake live week 8"] },
    { label: "Phase 3 — Scale and govern", when: "Weeks 9–12", status: "planned", items: ["Second-wave backlog triage", "Usage and ROI review"] }
  ]}
/>

<UseCaseCard>

coreContentListPresentation

One use-case tile with wave priority, area, owner, impact, effort, and time-to-value; slide-themed with compact density when three or four cards share a grid.

When to use: Always inside `<UseCaseGrid>` on a slide. Up to four cards per slide (2×2). Pair with `<OpportunityMatrix>` on the prior slide for prioritisation context.

Often with: UseCaseGridOpportunityMatrixRoadmapTimeline

Preview

Wave 1 — four agreed flows

Wave 1 Finance

Supplier invoice intake

Automate three-way matching between supplier invoices, purchase orders, and goods receipts.

Impact: ≈ 220 hrs / month
Effort: M
TTV: 6 weeks

Owner: Maria Fernandes

Prop	Type	Notes
title	string	Required. Short use case name.Example: `Supplier invoice intake`
description	ReactNode	Required. One-paragraph description of what gets automated.
area	string	Optional. Functional area.Example: `Finance`
owner	string	Optional. Process owner.Example: `Maria Fernandes`
priority	"now" \| "next" \| "later"	Optional. Default: `next`. Wave assignment.Values: now, next, laterExample: `now`
impact	string	Optional. Estimated impact.Example: `≈ 220 hrs / month`
effort	string	Optional. Estimated effort, T-shirt size or duration.Example: `M`
timeToValue	string	Optional. Estimated time to first value.Example: `6 weeks`

Examples

<UseCaseGrid title="Wave 1 — four agreed flows">
  <UseCaseCard
    title="Supplier invoice intake"
    priority="now"
    area="Finance"
    owner="Maria Fernandes"
    impact="≈ 220 hrs / month"
    effort="M"
    timeToValue="6 weeks"
    description="Automate three-way matching between supplier invoices, purchase orders, and goods receipts."
  />
</UseCaseGrid>

<UseCaseGrid>

coreContentListPresentation

Grid wrapper for one to four `<UseCaseCard>` children on a single slide; auto 2×2 layout for multiple cards, staggered entrance on slide enter (client).

When to use: Recommended use cases slide after opportunity scoring. One card: single column. Two to four cards: two columns (2×2). Split across slides if you have more than four.

Often with: UseCaseCardOpportunityMatrixRoadmapTimeline

Preview

Wave 1 — four agreed flows

Workshop sign-off, May 2026

Wave 1 Finance

Supplier invoice intake

Automate three-way matching between supplier invoices, purchase orders, and goods receipts.

Impact: ≈ 220 hrs / month
Effort: M
TTV: 6 weeks

Owner: Maria Fernandes

Wave 1 Operations

Order acknowledgements

Auto-generate acknowledgement emails within five minutes.

Impact: ≈ 90 hrs / month
Effort: S
TTV: 4 weeks

Owner: James Okafor

Wave 1 People

HR ticket triage

Route and summarise employee requests before they reach a human inbox.

Impact: ≈ 38 min / ticket
Effort: S
TTV: 5 weeks

Owner: Sarah Chen

Wave 2 Sales

Contract renewal alerts

Surface accounts at risk 60 days before renewal with draft outreach.

Impact: ≈ 12 renewals / quarter
Effort: M
TTV: 8 weeks

Owner: Tom Bradley

Prop	Type	Notes
title	string	Optional. Slide heading above the grid.
description	string	Optional. Subtitle or wave note.
columns	1 \| 2	Optional. Override column count. Defaults to 1 for a single card, 2 for two to four.Values: 1, 2Example: `2`
children	ReactNode	Required. One to four <UseCaseCard> elements.
tween	object	Optional. Optional GSAP vars for card entrance.

Examples

<UseCaseGrid title="Wave 1 — four agreed flows" description="Workshop sign-off, May 2026">
  <UseCaseCard
    title="Supplier invoice intake"
    priority="now"
    area="Finance"
    owner="Maria Fernandes"
    impact="≈ 220 hrs / month"
    effort="M"
    timeToValue="6 weeks"
    description="Automate three-way matching between supplier invoices, purchase orders, and goods receipts."
  />
  <UseCaseCard
    title="Order acknowledgements"
    priority="now"
    area="Operations"
    owner="James Okafor"
    impact="≈ 90 hrs / month"
    effort="S"
    timeToValue="4 weeks"
    description="Auto-generate acknowledgement emails within five minutes."
  />
  <UseCaseCard
    title="HR ticket triage"
    priority="now"
    area="People"
    owner="Sarah Chen"
    impact="≈ 38 min / ticket"
    effort="S"
    timeToValue="5 weeks"
    description="Route and summarise employee requests before they reach a human inbox."
  />
  <UseCaseCard
    title="Contract renewal alerts"
    priority="next"
    area="Sales"
    owner="Tom Bradley"
    impact="≈ 12 renewals / quarter"
    effort="M"
    timeToValue="8 weeks"
    description="Surface accounts at risk 60 days before renewal with draft outreach."
  />
</UseCaseGrid>

<TeamMember>

coreContentListPresentation

One team member tile with avatar, name, role, department, and optional affiliation chip; compact when five or six cards share a grid.

When to use: Always inside `<TeamGrid>` on a slide. Up to six members per slide. Use `affiliation` to distinguish client, Lunnoa, and partner roles.

Often with: TeamGridPersonCardQuoteSlide

Preview

Delivery team

Maria Fernandes

Head of Finance

Client

Prop	Type	Notes
name	string	Required. Full name.Example: `Maria Fernandes`
role	string	Optional. Job title.Example: `Head of Finance`
department	string	Optional. Team or department.Example: `Finance`
avatarUrl	string	Optional. Optional headshot URL.
initials	string	Optional. Avatar fallback when no image.Example: `MF`
affiliation	"Client" \| "Lunnoa" \| "Partner"	Optional. Optional org chip.Values: Client, Lunnoa, PartnerExample: `Client`

Examples

<TeamGrid title="Delivery team">
  <TeamMember name="Maria Fernandes" role="Head of Finance" affiliation="Client" initials="MF" />
</TeamGrid>

<TeamGrid>

coreContentListPresentation

Grid wrapper for one to six `<TeamMember>` children on a single slide; auto 3×2 layout for large rosters, staggered entrance on slide enter (client).

When to use: Team introduction slide early in a deck, or a steering-group recap. One to three members: single row. Four: 2×2. Five to six: 3×2. Split across slides if you have more than six.

Often with: TeamMemberTitleSlideSectionSlide

Preview

Wave 1 delivery team

Client sponsors and Lunnoa leads

Maria Fernandes

Head of Finance

Finance

Client

James Okafor

Operations Manager

Operations

Client

Elena Vasquez

Engagement lead

Lunnoa

Tom Bradley

Commercial director

Client

Sarah Chen

People operations

Client

Alex Morgan

Solutions architect

Lunnoa

Prop	Type	Notes
title	string	Optional. Slide heading above the grid.
description	string	Optional. Subtitle or roster note.
columns	2 \| 3	Optional. Override auto column count.Values: 2, 3Example: `3`
children	ReactNode	Required. One to six <TeamMember> elements.
tween	object	Optional. Optional GSAP vars for card entrance.

Examples

<TeamGrid title="Wave 1 delivery team" description="Client sponsors and Lunnoa leads">
  <TeamMember name="Maria Fernandes" role="Head of Finance" department="Finance" affiliation="Client" initials="MF" />
  <TeamMember name="James Okafor" role="Operations Manager" department="Operations" affiliation="Client" initials="JO" />
  <TeamMember name="Elena Vasquez" role="Engagement lead" affiliation="Lunnoa" initials="EV" />
  <TeamMember name="Tom Bradley" role="Commercial director" affiliation="Client" initials="TB" />
  <TeamMember name="Sarah Chen" role="People operations" affiliation="Client" initials="SC" />
  <TeamMember name="Alex Morgan" role="Solutions architect" affiliation="Lunnoa" initials="AM" />
</TeamGrid>

<DropCapLead>
coreContentPresentation
Lead paragraph with an oversized accent-coloured first letter, editorial-style.
When to use: Open a narrative-heavy slide (context, background) with a single anchoring paragraph.
Preview
Every customer order today is touched by sales, service, and operations before it ships.
Prop Type Notes
children string Required. The lead paragraph. Plain string only (no nested JSX) so the first character can be split out.
Examples
```
<DropCapLead>Every customer order today is touched by sales, service, and operations before it ships.</DropCapLead>
```

Prop	Type	Notes
children	string	Required. The lead paragraph. Plain string only (no nested JSX) so the first character can be split out.

<ProcessSteps>

coreTimelineContentPresentation

Numbered step sequences for methods, repeating flows, and milestone timelines. Three layouts: `cards` (horizontal grid with numerals or tone cards), `sequence` (left-to-right flow with arrows), `timeline` (spine with status pins and optional dates). Stagger in on slide enter (client).

When to use: One component for step-based slides. Use `layout="cards"` for a method or rollout walkthrough; `layout="sequence"` for a repeating operating rhythm; `layout="timeline"` with `date` and `status` on each step for programme milestones. Pass `tones` on cards layout for mixed-fill step cards instead of bare numerals.

Preview

How the pilot runs

Discover

Two discovery sessions, five interviews.

Design

Agree the target flow and owners.

Build

Ship the first automation in a sandbox.

Adopt

Handover with a runbook and metrics.

The weekly operating rhythm

Plan

Set the week's top three priorities.

Execute

Ship against the plan daily.

Review

Friday retro against the plan.

Adjust

Carry learnings into next week's plan.

Programme milestones

Mar 2026

Last IC

Jun 2026

Wave 1 live

Sep 2026

Wave 2 scoped

Dec 2026

Year-end review

Prop	Type	Notes
title	string	Optional. Heading above the steps.
steps	{ title: string; description?: string; date?: string; status?: "done" \| "now" \| "next" }[]	Required. Steps in display order. Cards/sequence: 2-6 steps with title and optional description. Timeline: add date and status per step.
layout	"cards" \| "sequence" \| "timeline"	Optional. Default: `cards`. Visual treatment: card grid (default), arrow sequence, or milestone timeline.Values: cards, sequence, timeline
numbering	"roman" \| "arabic" \| "circle"	Optional. Default: `arabic`. Ordinal style for cards and sequence layouts.Values: roman, arabic, circle
tones	("accent" \| "muted" \| "outline" \| "soft")[]	Optional. Cards layout only. One fill tone per step (cycles if shorter than steps). Omit for minimal numerals.
orientation	"horizontal" \| "vertical"	Optional. Default: `horizontal`. Timeline layout only: compact row or vertical spine for longer labels.Values: horizontal, vertical
tween	object	Optional. Optional GSAP vars for the entrance animation.

Examples

<ProcessSteps
  title="How the pilot runs"
  layout="cards"
  numbering="circle"
  steps={[
    { title: "Discover", description: "Two discovery sessions, five interviews." },
    { title: "Design", description: "Agree the target flow and owners." },
    { title: "Build", description: "Ship the first automation in a sandbox." },
    { title: "Adopt", description: "Handover with a runbook and metrics." },
  ]}
/>

<ProcessSteps
  title="The weekly operating rhythm"
  layout="sequence"
  numbering="circle"
  steps={[
    { title: "Plan", description: "Set the week's top three priorities." },
    { title: "Execute", description: "Ship against the plan daily." },
    { title: "Review", description: "Friday retro against the plan." },
    { title: "Adjust", description: "Carry learnings into next week's plan." },
  ]}
/>

<ProcessSteps
  title="Programme milestones"
  layout="timeline"
  steps={[
    { title: "Last IC", date: "Mar 2026", status: "done" },
    { title: "Wave 1 live", date: "Jun 2026", status: "now" },
    { title: "Wave 2 scoped", date: "Sep 2026", status: "next" },
    { title: "Year-end review", date: "Dec 2026", status: "next" },
  ]}
/>

<TopicGrid>

coreContentPresentation

Grid of 3-8 rule-topped topic tiles (no boxes); tiles stagger in on slide enter (client).

When to use: Overview of themes, workstreams, or focus areas at the start of a section.

Preview

What we looked at

Order intake

Five inboxes, no queue of record.

Supplier invoices

Manual three-way match.

HR triage

38 minutes per request.

Prop	Type	Notes
title	string	Optional. Heading above the grid.
topics	{ label: string; description?: string }[]	Required. 3-8 tiles in display order.
columns	2 \| 3 \| 4	Optional. Default: `3`. Grid column count.Values: 2, 3, 4
tween	object	Optional. Optional GSAP vars for the tile entrance.

Examples

<TopicGrid
  title="What we looked at"
  columns={3}
  topics={[
    { label: "Order intake", description: "Five inboxes, no queue of record." },
    { label: "Supplier invoices", description: "Manual three-way match." },
    { label: "HR triage", description: "38 minutes per request." },
  ]}
/>

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

<SpecList>

coreContentListPresentation

Rule-topped label/value definition list, for specs, meta, or a compact fact sheet.

When to use: A short list of facts (scope, dates, owners, constraints) that does not need a full table.

Preview

Engagement

Client: Acme Corp
Sponsor: COO
Duration: 6 weeks
Scope: Finance + Ops

Prop	Type	Notes
title	string	Optional. Heading above the list.
items	{ label: string; value: string }[]	Required. Label/value pairs in display order.
columns	1 \| 2	Optional. Default: `1`. Lay items out in one or two columns.Values: 1, 2

Examples

<SpecList
  title="Engagement"
  columns={2}
  items={[
    { label: "Client", value: "Acme Corp" },
    { label: "Sponsor", value: "COO" },
    { label: "Duration", value: "6 weeks" },
    { label: "Scope", value: "Finance + Ops" },
  ]}
/>

<AgendaGrid>

coreAgendaContentPresentation

Asymmetric agenda grid: one optional featured tile spanning two rows beside several mixed-fill topic tiles; tiles stagger in on slide enter (client).

When to use: A magazine-contents-style agenda or topic overview where one lead topic deserves visual weight — richer than the plain numbered AgendaSlide list.

Often with: AgendaSlideTopicGridDeliverableGrid

Preview

Agenda

Five topics · ninety minutes

Where we stand today.

Context on the current process.

Context

The big shift.

Insight

By the numbers.

Data

How we'll get there.

Plan

What it adds up to.

Outcomes

Prop	Type	Notes
title	string	Optional. Heading above the grid.
eyebrow	string	Optional. Small label opposite the title.
items	{ title: string; description?: string; tag?: string; tone?: "accent" \| "accentMuted" \| "outline" \| "soft"; featured?: boolean }[]	Required. Tiles in display order. Mark at most one item featured (spans two rows, larger type). tone defaults to a cycling accent/soft/outline/accentMuted pattern.
columns	2 \| 3	Optional. Default: `3`. Grid column count.
tween	object	Optional. Optional GSAP vars for the tile entrance.

Examples

<AgendaGrid
  title="Agenda"
  eyebrow="Five topics · ninety minutes"
  items={[
    { title: "Where we stand today.", description: "Context on the current process.", tag: "Context", tone: "accent", featured: true },
    { title: "The big shift.", tag: "Insight", tone: "accentMuted" },
    { title: "By the numbers.", tag: "Data", tone: "soft" },
    { title: "How we'll get there.", tag: "Plan", tone: "outline" },
    { title: "What it adds up to.", tag: "Outcomes", tone: "soft" },
  ]}
/>

<Pyramid>

coreContentPresentation

Tapering stack of 3-6 levels, apex first — a maturity, hierarchy, or "foundation up" diagram; bars grow in on slide enter (client).

When to use: A hierarchy or maturity model that reads bottom-up (foundational capabilities at the base, the outcome at the apex) — an alternative to MaturityRadar/MaturityHeatmap for a single-track model.

Often with: MaturityRadarMaturityHeatmapProcessSteps

Preview

What good looks like

Outcomes

Measurable business impact.

Adoption

Teams using the workflow daily.

Process

A documented, owned process.

Data foundation

Clean, accessible source data.

Prop	Type	Notes
title	string	Optional. Heading above the pyramid.
levels	{ label: string; description?: string }[]	Required. 3-6 levels ordered apex (narrowest, index 0) to base (widest, last).
tween	object	Optional. Optional GSAP vars for the bar entrance.

Examples

<Pyramid
  title="What good looks like"
  levels={[
    { label: "Outcomes", description: "Measurable business impact." },
    { label: "Adoption", description: "Teams using the workflow daily." },
    { label: "Process", description: "A documented, owned process." },
    { label: "Data foundation", description: "Clean, accessible source data." },
  ]}
/>