Component library

Showing 5 components with role agenda.

<DeliverableGrid>

financeAgendaDataPresentation

Compact deliverable table with owner, optional due date, and status.

When to use: Wave or sprint outcome tables on project update slides.

Preview

Deliverables

DeliverableOwnerDueStatus

Invoice APIPlatform18 JunIn test

PlaybooksChange25 JunDraft

Prop	Type	Notes
title	string	Optional. Default: `Deliverables`. Heading above the grid.
columns	2 \| 3	Optional. Default: `3`. 3 columns include Due; 2 columns omit Due.Values: 2, 3Example: `3`
rows	{ deliverable: string; owner: string; due: string; status: string }[]	Required. Table rows; `due` is shown only when columns is 3.

Examples

<DeliverableGrid
  rows={[
    { deliverable: "Invoice API", owner: "Platform", due: "18 Jun", status: "In test" },
    { deliverable: "Playbooks", owner: "Change", due: "25 Jun", status: "Draft" },
  ]}
/>

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

<IndexList>

coreAgendaListPresentation

Numbered index of 4-8 entries in a hairline-divided two-column grid; rows stagger in on slide enter (client).

When to use: An editorial "contents" or "trends at a glance" page — several short titled entries read together, not a left-to-right sequence (use ProcessSteps for that).

Often with: ProcessStepsTopicGridAgendaSlide

Preview

The index, in six entries

Spring 2026 · selected trends

01.

Slow software

Tools that opt out of the urgency contest by default.

02.

Domestic interfaces

Screens designed to live in living rooms.

03.

Hand-set print again

A return to letterpress and small-edition print.

04.

Receipts and ledgers

Information designed to be filed, not consumed.

Prop	Type	Notes
title	string	Optional. Heading above the list.
eyebrow	string	Optional. Small label opposite the title (e.g. "Spring 2026 · selected trends").
entries	{ title: string; description?: string }[]	Required. 4-8 entries in display order.
columns	1 \| 2	Optional. Default: `2`. Grid column count.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<IndexList
  title="The index, in six entries"
  eyebrow="Spring 2026 · selected trends"
  entries={[
    { title: "Slow software", description: "Tools that opt out of the urgency contest by default." },
    { title: "Domestic interfaces", description: "Screens designed to live in living rooms." },
    { title: "Hand-set print again", description: "A return to letterpress and small-edition print." },
    { title: "Receipts and ledgers", description: "Information designed to be filed, not consumed." },
  ]}
/>

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

<AgendaSlide>

coreAgendaTimelinePresentation

Numbered agenda list with optional timeboxes; rows stagger in on slide enter (client).

When to use: Use as slide 2 of most decks. Pass three to seven items so the slide stays scannable.

Preview

Today's agenda

01Programme health10 min
02Wave 1 outcomes15 min
03Wave 2 scope20 min
04Decisions and asks10 min

Prop	Type	Notes
title	string	Optional. Default: `Agenda`. Slide heading.
items	{ label: string; timebox?: string }[]	Required. Agenda entries in display order; numbering is added automatically.
tween	object	Optional. Optional GSAP vars (duration, ease, stagger, delay, y, opacity, autoAlpha).

Examples

<AgendaSlide
  title="Today's agenda"
  items={[
    { label: "Programme health", timebox: "10 min" },
    { label: "Wave 1 outcomes", timebox: "15 min" },
    { label: "Wave 2 scope", timebox: "20 min" },
    { label: "Decisions and asks", timebox: "10 min" }
  ]}
/>