Component library

Showing 4 components with role compare.

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

<ComparisonTiles>

coreComparePresentation

Two to four side-by-side comparison tiles (plan vs actual, Q vs Q, base vs stress); tiles stagger in on slide enter (client).

When to use: Use when each metric needs a paired primary and secondary value with an optional delta. Keep copy short; this is a slide, not a table.

Preview

Q3 vs plan

Revenue

Plan

£24m

Actual

£26.4m

+10%

EBITDA

Plan

£4.8m

Actual

£4.2m

-12%

Prop	Type	Notes
title	string	Optional. Optional slide heading above the tiles.
items	{ label: string; primaryValue: string; primaryLabel?: string; secondaryValue: string; secondaryLabel?: string; deltaValue?: string; deltaTone?: "up" \| "down" \| "flat" }[]	Required. Two to four comparison tiles. Each tile shows a primary and secondary value plus an optional delta chip.
tween	object	Optional. Optional GSAP vars for the tile entrance.

Examples

<ComparisonTiles
  title="Q3 vs plan"
  items={[
    { label: "Revenue", primaryLabel: "Plan", primaryValue: "£24m", secondaryLabel: "Actual", secondaryValue: "£26.4m", deltaValue: "+10%", deltaTone: "up" },
    { label: "EBITDA", primaryLabel: "Plan", primaryValue: "£4.8m", secondaryLabel: "Actual", secondaryValue: "£4.2m", deltaValue: "-12%", deltaTone: "down" }
  ]}
/>

<PlanComparisonGrid>

expressiveCompareCTAPresentation

Side-by-side pricing or plan comparison cards with feature lists and optional featured tier highlight.

When to use: SaaS pricing, service tiers, or licence options. Typically three tiers; mark the recommended plan with featured: true.

Preview

Pricing

Choose a plan

Starter

£0 /mo

For evaluation.

5 users
Community support

Start free

Team

£29 /mo

For growing teams.

Unlimited workflows
SSO

Book a demo

Enterprise

Custom

For regulated environments.

Dedicated support
Audit logs

Contact sales

Prop	Type	Notes
label	string	Optional. Eyebrow above the section title.
title	string	Optional. Section headline.
tiers	{ name: string; price: string; priceSuffix?: string; description?: string; features: string[]; featured?: boolean; cta?: string }[]	Required. Plan cards (typically three). Pre-format price strings with currency.
tween	object	Optional. Optional GSAP vars for card entrance.

Examples

<PlanComparisonGrid
  label="Pricing"
  title="Choose a plan"
  tiers={[
    { name: "Starter", price: "£0", priceSuffix: "/mo", description: "For evaluation.", features: ["5 users", "Community support"], cta: "Start free" },
    { name: "Team", price: "£29", priceSuffix: "/mo", description: "For growing teams.", features: ["Unlimited workflows", "SSO"], featured: true, cta: "Book a demo" },
    { name: "Enterprise", price: "Custom", description: "For regulated environments.", features: ["Dedicated support", "Audit logs"], cta: "Contact sales" }
  ]}
/>

<BroadsideCompare>

broadsideComparePresentation

Before/after compare; right panel uses accent wash.

When to use: Today vs proposed.

Preview

Compare09

Today

five inboxes

/Manual forwards
/No audit trail

After

one intake

/Agent triage
/Full log

Prop	Type	Notes
chromeLeft	string	Optional. Top chrome left.
chromeRight	string	Optional. Top chrome right.
left	object	Required. { kicker?, title, body?, items? }.
right	object	Required. { kicker?, title, body?, items? }.
footLeft	string	Optional. Footer left.
footRight	string	Optional. Footer right.

Examples

<BroadsideCompare chromeLeft="Compare" chromeRight="09" left={{ kicker: "Today", title: "five inboxes", items: ["Manual forwards", "No audit trail"] }} right={{ kicker: "After", title: "one intake", items: ["Agent triage", "Full log"] }} />