Component library

Showing 13 components in the broadside deck.

<BroadsideCover>

broadsideTitlePresentation

Protest-poster cover: massive lowercase display title with catalogue number and meta.

When to use: Opening slide for manifesto / editorial decks. Pair with dark or brand presentationTheme.background.

Preview

01Broadside

this is the broadside style

Type so large it becomes image.

Lunnoa2026 · Showcase

Prop	Type	Notes
number	string	Optional. Default: `"01"`. Catalogue number top-left.
label	string	Optional. Default: `"Broadside"`. Top-right label.
title	string	Required. Lowercase display title.
lead	string	Optional. Supporting sentence.
author	string	Optional. Bottom-left meta.
meta	string	Optional. Bottom-right meta.

Examples

<BroadsideCover number="01" title="this is the broadside style" lead="Type so large it becomes image." author="Lunnoa" meta="2026 · Showcase" />

<BroadsideChapter>
broadsideChapterPresentation
Chapter opener with oversized lowercase title.
When to use: Section divider in an editorial deck.
Preview
02 / Chapter
the next chapter begins here
What this section covers.
Prop Type Notes
number string Optional. e.g. "02 / Chapter".
title string Required. Chapter title (lowercase).
lead string Optional. Optional framing sentence.
Examples
```
<BroadsideChapter number="02 / Chapter" title="the next chapter begins here" lead="What this section covers." />
```

Prop	Type	Notes
number	string	Optional. e.g. "02 / Chapter".
title	string	Required. Chapter title (lowercase).
lead	string	Optional. Optional framing sentence.

<BroadsideStatement>

broadsideStatementPresentation

Single bold claim with mono kicker and accent rule.

When to use: Thesis / punchline slide.

Preview

The Argument03

Core Thesis

orange is not an accent. it is the room.

Broadside

Prop	Type	Notes
chromeLeft	string	Optional. Top chrome left.
chromeRight	string	Optional. Top chrome right.
kicker	string	Optional. Mono eyebrow.
title	string	Required. Accent-coloured claim.
footLeft	string	Optional. Footer left.
footRight	string	Optional. Footer right.

Examples

<BroadsideStatement chromeLeft="The Argument" chromeRight="03" kicker="Core Thesis" title="orange is not an accent. it is the room." footLeft="Broadside" />

<BroadsideSplit>

broadsideSplitMediaPresentation

Text + image split. Use upload_media (MCP) or an https URL for imageSrc.

When to use: When a slide needs a photograph or diagram beside copy.

Preview

Evidence04

when content needs image support

Upload via MCP upload_media, then pass the returned url.

Source · 2026

Prop	Type	Notes
chromeLeft	string	Optional. Top chrome left.
chromeRight	string	Optional. Top chrome right.
kicker	string	Optional. Mono eyebrow.
title	string	Required. Headline.
body	string	Optional. Supporting copy.
imageSrc	string	Optional. Image URL from upload_media or https.
imageAlt	string	Optional. Alt text.
imageCaption	string	Optional. Caption under the image.
footLeft	string	Optional. Footer left.
footRight	string	Optional. Footer right.

Examples

<BroadsideSplit chromeLeft="Evidence" chromeRight="04" title="when content needs image support" body="Upload via MCP upload_media, then pass the returned url." imageSrc="/uploads/media/example.png" imageAlt="Evidence wall" imageCaption="Source · 2026" />

<BroadsideStats>

broadsideStatsPresentation

Three top-bordered stat cards with accent numerals.

When to use: KPI strip in editorial voice.

Preview

Numbers05

87%

Retention

YoY

Markets

4.2×

Pipeline

Prop	Type	Notes
chromeLeft	string	Optional. Top chrome left.
chromeRight	string	Optional. Top chrome right.
title	string	Optional. Optional headline.
stats	array	Required. [{ value, label, note? }].
footLeft	string	Optional. Footer left.
footRight	string	Optional. Footer right.

Examples

<BroadsideStats chromeLeft="Numbers" chromeRight="05" stats={[{ value: "87%", label: "Retention", note: "YoY" }, { value: "12", label: "Markets" }, { value: "4.2×", label: "Pipeline" }]} />

<BroadsideFadeList>
broadsideListStatementPresentation
Stacked display words at fading opacities (max 3).
When to use: Before / during / after or staged narrative.
Preview
06
before
during
after
Prop Type Notes
number string Optional. Catalogue number.
title string Optional. Optional side title.
items string[] Required. Up to three words/phrases.
Examples
```
<BroadsideFadeList number="06" items={["before", "during", "after"]} />
```

Prop	Type	Notes
number	string	Optional. Catalogue number.
title	string	Optional. Optional side title.
items	string[]	Required. Up to three words/phrases.

<BroadsideList>

broadsideListPresentation

Slash-marked bullet list capped at three items.

When to use: Short takeaways in Broadside voice.

Preview

Rules07

three rules only

Type is the image
One accent colour
No shadows

Prop	Type	Notes
chromeLeft	string	Optional. Top chrome left.
chromeRight	string	Optional. Top chrome right.
title	string	Optional. Headline.
items	string[]	Required. Up to three bullets.
footLeft	string	Optional. Footer left.
footRight	string	Optional. Footer right.

Examples

<BroadsideList chromeLeft="Rules" chromeRight="07" title="three rules only" items={["Type is the image", "One accent colour", "No shadows"]} />

<BroadsideQuote>
broadsideQuotePresentation
Oversized pull-quote with accent quotation mark.
When to use: Interview or manifesto quote.
Preview
the room is the message.
Design lead · 2026
Prop Type Notes
quote string Required. Quote body (lowercase preferred).
attribution string Optional. Mono attribution.
Examples
```
<BroadsideQuote quote="the room is the message." attribution="Design lead · 2026" />
```

Prop	Type	Notes
quote	string	Required. Quote body (lowercase preferred).
attribution	string	Optional. Mono attribution.

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

<BroadsideChart>

broadsideChartPresentation

Vertical bar chart with optional accent bar.

When to use: Simple comparative bars.

Preview

share of voice

Prop	Type	Notes
chromeLeft	string	Optional. Top chrome left.
chromeRight	string	Optional. Top chrome right.
title	string	Optional. Headline.
items	array	Required. [{ label, value 0–100, accent? }].
footLeft	string	Optional. Footer left.
footRight	string	Optional. Footer right.

Examples

<BroadsideChart title="share of voice" items={[{ label: "Us", value: 72, accent: true }, { label: "A", value: 48 }, { label: "B", value: 35 }]} />

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

<BroadsideEnd>
broadsideOutroPresentation
Closing display title with optional author meta.
When to use: Final slide.
Preview
20
thank you
Questions welcome.
Lunnoa2026
Prop Type Notes
number string Optional. Catalogue number.
title string Required. Closing title.
lead string Optional. Supporting line.
author string Optional. Bottom-left.
meta string Optional. Bottom-right.
Examples
```
<BroadsideEnd number="20" title="thank you" lead="Questions welcome." author="Lunnoa" meta="2026" />
```

Prop	Type	Notes
number	string	Optional. Catalogue number.
title	string	Required. Closing title.
lead	string	Optional. Supporting line.
author	string	Optional. Bottom-left.
meta	string	Optional. Bottom-right.

<BroadsideFrame>

broadsideChromePresentation

Chrome + foot wrapper around arbitrary children.

When to use: When composing custom Broadside content with shared hairline chrome.

Preview

Notes11

Custom body

Prop	Type	Notes
chromeLeft	string	Optional. Top chrome left.
chromeRight	string	Optional. Top chrome right.
footLeft	string	Optional. Footer left.
footRight	string	Optional. Footer right.
children	ReactNode	Required. Slide body.

Examples

<BroadsideFrame chromeLeft="Notes" chromeRight="11"><p>Custom body</p></BroadsideFrame>

Preview

this is the broadside style

Examples

Preview

the next chapter begins here

Examples

Preview

orange is not an accent. it is the room.

Examples

Preview

when content needs image support

Examples

Preview

Examples

Preview

Examples

Preview

three rules only

Examples

Preview

Examples

Preview

five inboxes

one intake

Examples

Preview

share of voice

Examples

Preview

how it works

Examples

Preview

thank you

Examples

Preview

Examples