Component library

Showing 9 components in the shared kit with role content.

Narrative

<Lead>
sharedContentNarrative
Opening paragraph of a section. Larger and slightly muted, sets the tone.
When to use: Use exactly once per section, immediately after the section's H1, to summarise the section's headline finding in 1–2 sentences.
Preview
Across two days with Acme's operations and finance teams, we mapped twelve candidate automation use cases. Six are recommended for the first wave.
Prop Type Notes
children ReactNode Required. The opener prose.
className string Optional. Tailwind classes appended to the wrapper.
Examples
```
<Lead>
    Across two days with Acme's operations and finance teams, we mapped
    twelve candidate automation use cases. Six are recommended for the
    first wave.
</Lead>
```

Prop	Type	Notes
children	ReactNode	Required. The opener prose.
className	string	Optional. Tailwind classes appended to the wrapper.

<Callout>

sharedContentStatementNarrative

Generic emphasis box for asides, important context, or warnings.

When to use: Use when text needs visual separation from surrounding prose but isn't a finding or recommendation. Common: 'assumptions to validate', 'what we mean by X', 'next steps'.

Preview

Prop	Type	Notes
tone	"info" \| "success" \| "warning" \| "danger"	Optional. Default: `info`. Colour and icon.Values: info, success, warning, dangerExample: `warning`
title	string	Optional. Optional headline.Example: `Two assumptions to validate in week 1`
children	ReactNode	Required. Callout body.

Examples

<Callout tone="warning" title="Two assumptions to validate in week 1">
    The projection above assumes the ERP middleware can be exposed within
    the first three weeks, and that the AP team is willing to triage
    exceptions in a Lunnoa queue rather than email.
</Callout>

<TeamMember>

sharedListContentNarrative

One team member tile with avatar, name, role, department, and optional affiliation badge.

When to use: Always inside `<TeamGrid>`. Use for delivery teams, workshop squads, or mixed client/Lunnoa rosters (up to six per grid).

Often with: TeamGridPersonCard

Preview

Maria Fernandes

Head of Finance

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; defaults to initials from name.Example: `MF`
affiliation	"Client" \| "Lunnoa" \| "Partner"	Optional. Optional org badge for mixed teams.Values: Client, Lunnoa, PartnerExample: `Client`

Examples

<TeamMember name="Maria Fernandes" role="Head of Finance" department="Finance" affiliation="Client" initials="MF" />

<TeamGrid>

sharedListContentNarrative

Grid of up to six TeamMember cards with optional heading.

When to use: Delivery team, workshop squad, or steering group in document reports. Use 3 columns by default; 2 for wider cards.

Often with: TeamMemberPersonCard

Preview

Wave 1 delivery team

Client sponsors and Lunnoa delivery leads

Maria Fernandes

Head of Finance

Finance

Client

James Okafor

Operations Manager

Operations

Client

Elena Vasquez

Engagement lead

Lunnoa

Prop	Type	Notes
title	string	Optional. Section heading above the grid.
description	string	Optional. Subtitle or roster note.
columns	2 \| 3	Optional. Default: `3`. Desktop column count.Values: 2, 3Example: `3`
children	ReactNode	Required. One to six <TeamMember> elements.

Examples

<TeamGrid title="Wave 1 delivery team" description="Client sponsors and Lunnoa delivery 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" department="Lunnoa" affiliation="Lunnoa" initials="EV" />
</TeamGrid>

<TwoColumn>
sharedSplitContentNarrative
Side-by-side blocks. Stacks vertically on mobile.
When to use: Use to balance two related blocks (e.g., two quotes, two side notes). For 'before vs. after' use BeforeAfter instead.
Preview
“…”
Maria Fernandes, Head of Finance
“…”
James Okafor, Operations Manager
Prop Type Notes
reverse boolean Optional. Default: false. Swap column order on desktop.
children ReactNode Required. Two children, each rendered as one column.
Examples
```
<TwoColumn>
    <Quote attribution="Maria Fernandes" role="Head of Finance">…</Quote>
    <Quote attribution="James Okafor" role="Operations Manager">…</Quote>
</TwoColumn>
```

Prop	Type	Notes
reverse	boolean	Optional. Default: `false`. Swap column order on desktop.
children	ReactNode	Required. Two children, each rendered as one column.

Dashboard

<MaturityRadar>

sharedChartContentDashboard

Radar chart of dimensions (axes) vs. maturity score (radial). Optional target overlay.

When to use: Use to show a multi-dimensional capability assessment, typically in 'current state' or 'executive summary' sections. Works for SEO maturity too (e.g. Technical, Content, Authority, Measurement, Governance as axes), where the pillar bars of <PillarScoreCard> would be too coarse.

Preview

Acme automation maturity — current vs. 6-month target

Scores from 11 stakeholder interviews using the Lunnoa maturity framework (1 = ad hoc, 5 = optimised).

Current Target

Prop	Type	Notes
dimensions	string[]	Required. Axis labels, in order.Example: `["Data", "Tooling", "Process", "Governance", "Skills"]`
current	number[]	Required. Current scores, same order as dimensions.Example: `[3, 2, 3, 2, 2]`
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. Chart title.
description	string	Optional. Subtitle / methodology note.

Examples

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

<MaturityHeatmap>

sharedChartContentDataDashboard

Stage-based maturity table (rows = dimensions, columns = levels). One highlighted cell per row.

When to use: Use as an alternative to MaturityRadar when the maturity framework is stage-based (e.g. CMMI-style: ad hoc / repeatable / defined / managed / optimised).

Preview

Current vs 6-month target

Dimension	Ad hoc	Repeatable	Defined	Managed	Optimised
Data quality			●	○
Tooling		●		○

Current Target

Prop	Type	Notes
rows	string[]	Required. Row labels (dimensions).Example: `["Data quality", "Tooling", "Process clarity"]`
columns	string[]	Required. Column labels (maturity levels).Example: `["Ad hoc", "Repeatable", "Defined", "Managed", "Optimised"]`
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. Chart title.

Examples

<MaturityHeatmap
    rows={["Data quality", "Tooling"]}
    columns={["Ad hoc", "Repeatable", "Defined", "Managed", "Optimised"]}
    current={[[false, false, true, false, false], [false, true, false, false, false]]}
    target={[[false, false, false, true, false], [false, false, false, true, false]]}
    title="Current vs 6-month target"
/>

<OpportunityMatrix>

sharedChartCompareContentDashboard

Effort × impact scatter plot (effort increases left to right, impact increases bottom to top). Top-left (low effort, high impact) is the usual quick-win zone. Optional category (or name) tabs match the DataTable filter pattern.

When to use: Use to visualise a portfolio of candidate use cases / opportunities scored on two dimensions. Typically immediately before the recommended use case grid. Also fits SEO analyses: plot keyword clusters or content opportunities as effort × impact, with categories like Technical, Content, and Authority as tabs.

Preview

Twelve use cases scored on effort and impact

FinanceOperationsPeople

Portfolio by function

FinanceOperations

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. Chart title.
description	string	Optional. Subtitle.
tabs	{ id: string; label: string }[]	Optional. Optional filter tabs (same pattern as DataTable). Include `{ id: "all", label: "All" }` first. Other tab ids slug-match `tabFilterKey` on each item (default: category names, e.g. `finance` for Finance).
tabFilterKey	"category" \| "name"	Optional. Default: `category`. Which item field tab ids match after slugify.Values: category, name

Examples

<OpportunityMatrix
    title="Twelve use cases scored on effort and impact"
    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" }
    ]}
/>

<OpportunityMatrix
    title="Portfolio by function"
    tabs={[
        { id: "all", label: "All" },
        { id: "finance", label: "Finance" },
        { id: "operations", label: "Operations" }
    ]}
    items={[
        { name: "Invoice intake", effort: 2, impact: 5, category: "Finance" },
        { name: "Order acknowledgements", effort: 2, impact: 4, category: "Operations" }
    ]}
/>

<RoadmapTimeline>

sharedTimelineAgendaContentDashboard

Vertical phased timeline with status badges per phase.

When to use: Use in roadmap / delivery plan sections to sequence work across phases (typically 3–5 phases). In SEO reports, use it for the remediation and content roadmap (e.g. technical fixes → content production → authority building).

Preview

Wave 1 — 12-week delivery

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

Prop	Type	Notes
phases	{ label: string; when: string; status?: 'done'\|'active'\|'planned'; items?: string[] }[]	Required. Phases in chronological order.
title	string	Optional. Section title for the timeline.
description	string	Optional. Subtitle.

Examples

<RoadmapTimeline
    title="Wave 1 — 12-week delivery"
    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"] }
    ]}
/>