Showing 8 components in the core deck with role list.
Styled bullet list from a string array.
When to use: Agenda, takeaways, or constraints.
| Prop | Type | Notes |
|---|---|---|
| items | string[] | Required. Bullet strings. |
<BulletList items={["Map the handoffs", "Pick two pilots", "Measure hours reclaimed"]} />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
| 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 |
<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>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
| 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. |
<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>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
| 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 |
<TeamGrid title="Delivery team">
<TeamMember name="Maria Fernandes" role="Head of Finance" affiliation="Client" initials="MF" />
</TeamGrid>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
| 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. |
<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>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.
| 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 |
<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" },
]}
/>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
| 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. |
<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." },
]}
/>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
| 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. |
<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" },
]}
/>