Component library

Showing 8 components with role timeline.

<NextThirtyDays>
financeListTimelinePresentation
Ordered list of dated commitments for the coming month.
When to use: Delivery cadence or milestone preview on project update decks.
Preview
Next 30 days
Week 1Freeze scope for pilot A.
Week 2Integration test with sandbox ERP.
Week 4Go / no-go for production cutover.
Prop Type Notes
title string Optional. Default: Next 30 days. Slide heading.
items { date: string; text: string }[] Required. `date` is a short label (e.g. "12 Jun" or "Week 2"); `text` is the commitment.
Examples
```
<NextThirtyDays
  items={[
    { date: "Week 1", text: "Freeze scope for pilot A." },
    { date: "Week 2", text: "Integration test with sandbox ERP." },
    { date: "Week 4", text: "Go / no-go for production cutover." },
  ]}
/>
```

Prop	Type	Notes
title	string	Optional. Default: `Next 30 days`. Slide heading.
items	{ date: string; text: string }[]	Required. `date` is a short label (e.g. "12 Jun" or "Week 2"); `text` is the commitment.

<ProjectGantt>

financeTimelineDataPresentation

Professional week-indexed Gantt: time axis with gridlines, status-coloured bars with an optional inner progress fill, milestone markers, optional phase grouping, and a "today" marker. Bars scale in on slide enter (client).

When to use: High-level delivery plan or roadmap when you need a real time-scaled Gantt view (not just a phased list) without external chart libraries. Use `groups` instead of `rows` once you have more than about five workstreams, so they read as waves/phases rather than one long list.

Often with: RoadmapTimelineProcessSteps

Preview

Delivery plan

Week 0 – 15 · 16 weeks

Workstream

W0W3W6W9W12W16

Wave 1: Foundations

Discovery

Build

Sprint 1–4

Wave 2: Rollout

UAT

Go-live

Hypercare

DoneIn progressAt riskPlannedToday

Prop	Type	Notes
title	string	Optional. Default: `Delivery plan`. Slide heading.
totalWeeks	number	Optional. Default: `12`. Timeline length; indices run 0 … totalWeeks - 1.
unitLabel	string	Optional. Default: `"Week"`. Axis unit noun used in tick labels (first letter, e.g. "W3") and the caption. Use "Sprint" or "Month" for other cadences.
rows	{ trackLabel: string; segments: GanttSegment[]; milestones?: { label: string; week: number }[] }[]	Optional. Flat swimlane rows (ignored when `groups` is set). GanttSegment = { label, startWeek, durationWeeks, status?: "done" \| "active" \| "planned" \| "at-risk", progressPct?: number }.
groups	{ groupLabel: string; rows: GanttRow[] }[]	Optional. Rows organised into labelled phases/waves (e.g. "Wave 1: Foundations"), each with its own heading. Preferred over `rows` for plans with more than ~5 workstreams.
todayWeek	number	Optional. 0-based week to draw a vertical "today" marker through every row.
showLegend	boolean	Optional. Default: `true`. Show the status-colour legend below the chart. Only renders when more than one status is actually used.
tween	object	Optional. Optional subset for the bar/milestone tween: duration, ease, stagger, delay (see sanitize allowlist).

Examples

<ProjectGantt
  title="Delivery plan"
  totalWeeks={16}
  todayWeek={5}
  groups={[
    {
      groupLabel: "Wave 1: Foundations",
      rows: [
        {
          trackLabel: "Discovery",
          segments: [{ label: "Discovery", startWeek: 0, durationWeeks: 3, status: "done" }],
        },
        {
          trackLabel: "Build",
          segments: [{ label: "Sprint 1–4", startWeek: 2, durationWeeks: 6, status: "active", progressPct: 55 }],
          milestones: [{ label: "Design freeze", week: 4 }],
        },
      ],
    },
    {
      groupLabel: "Wave 2: Rollout",
      rows: [
        {
          trackLabel: "UAT",
          segments: [{ label: "UAT", startWeek: 8, durationWeeks: 3, status: "planned" }],
        },
        {
          trackLabel: "Go-live",
          segments: [{ label: "Hypercare", startWeek: 11, durationWeeks: 2, status: "at-risk" }],
          milestones: [{ label: "Go-live", week: 11 }],
        },
      ],
    },
  ]}
/>

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

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

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

<LiquiditySchedule>

financeTimelineDataPresentation

Upcoming capital calls and distributions with date, type chip, optional note, and amount; rows stagger in on slide enter (client).

When to use: Use to give LPs visibility on the next 4-8 expected cash movements. Pre-format amounts with the fund's sign convention.

Preview

Liquidity schedule

12 Jun 2026CallWave 2 build-out.£18m
30 Jun 2026DistributionLumen Health partial exit.£24m
30 Sep 2026CallBolt-on completion.£8m

Prop	Type	Notes
title	string	Optional. Default: `Liquidity schedule`. Slide heading.
items	{ date: string; type: "call" \| "distribution"; amount: string; note?: string }[]	Required. Liquidity events in chronological order.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<LiquiditySchedule
  items={[
    { date: "12 Jun 2026", type: "call", amount: "£18m", note: "Wave 2 build-out." },
    { date: "30 Jun 2026", type: "distribution", amount: "£24m", note: "Lumen Health partial exit." },
    { date: "30 Sep 2026", type: "call", amount: "£8m", note: "Bolt-on completion." }
  ]}
/>

<ChronologySlide>

expressiveTimelinePresentation

Alternating timeline with dated milestones and optional active-state markers; events stagger in on slide enter.

When to use: Product roadmap, rollout plan, or programme chronology with three to six dated events. Mark current or completed phases with active: true.

Preview

Chronology

Development Roadmap

Q1 2026

Concept & Architecture

Wireframes and core grid.

Q2 2026

Asset Generation

Pixel components coded.

Q3 2026

Data Integration

Charting engine and counters.

Q4 2026

Global Launch

Public release.

Prop	Type	Notes
label	string	Optional. HUD pill above the title.
title	string	Optional. Section headline.
events	{ date: string; title: string; description?: string; active?: boolean }[]	Required. Timeline events; active nodes render yellow.
tween	object	Optional. Optional GSAP vars for event entrance.

Examples

<ChronologySlide
  label="Chronology"
  title="Development Roadmap"
  events={[
    { date: "Q1 2026", title: "Concept & Architecture", description: "Wireframes and core grid.", active: true },
    { date: "Q2 2026", title: "Asset Generation", description: "Pixel components coded.", active: true },
    { date: "Q3 2026", title: "Data Integration", description: "Charting engine and counters." },
    { date: "Q4 2026", title: "Global Launch", description: "Public release." }
  ]}
/>

<BroadsideFlow>

broadsideTimelinePresentation

Horizontal numbered process steps.

When to use: Method / how-it-works.

Preview

how it works

Discover

Talk to users.

Define

One hypothesis.

Prop	Type	Notes
chromeLeft	string	Optional. Top chrome left.
chromeRight	string	Optional. Top chrome right.
title	string	Optional. Headline.
steps	array	Required. [{ number, title, description? }].
footLeft	string	Optional. Footer left.
footRight	string	Optional. Footer right.

Examples

<BroadsideFlow title="how it works" steps={[{ number: "01", title: "Discover", description: "Talk to users." }, { number: "02", title: "Define", description: "One hypothesis." }]} />

Preview

Next 30 days

Examples

Preview

Delivery plan

Examples

Preview

Wave 1 — 12-week delivery

Phase 1 — Foundation

Phase 2 — Build the three flows

Phase 3 — Scale and govern

Examples

Preview

How the pilot runs

The weekly operating rhythm

Programme milestones

Examples

Preview

Today's agenda

Examples

Preview

Liquidity schedule

Examples

Preview

Development Roadmap

Concept & Architecture

Asset Generation

Data Integration

Global Launch

Examples

Preview

how it works

Examples