Component Gallery

Every MDX component, live and interactive. Adjust props to preview, then copy the snippet into your post.

Decorative(10)

StickyNote

Decorativefull + medium

A collapsible sticky note for sidebar observations, reminders, or key points.

Sticky notes work great for asides, reminders, and callout thoughts.

Props

Title

Color

Content

MDX snippet

<StickyNote title="Key Insight" color="yellow">
  Sticky notes work great for asides, reminders, and callout thoughts.
</StickyNote>

MarginNote

Decorativefull + medium

A handwritten-style note anchored to the left or right margin of the article.

A quick margin thought that adds context.

Props

Color

Side

Content

MDX snippet

<MarginNote color="amber" side="right">
  A quick margin thought that adds context.
</MarginNote>

WashiTape

Decorativefull only

A decorative washi-tape strip with optional label, great for headings and section dividers.

Props

Color

Label

Tilt (deg)

MDX snippet

<WashiTape color="yellow" label="Featured" tilt={-1}>
  Section title or decorative accent
</WashiTape>

Polaroid

Decorativefull + medium

A tilted polaroid photo frame with optional caption, supporting float layouts.

Kyoto, 2024

Props

Tilt (deg)

Float

MDX snippet

<Polaroid src="/images/your-photo.jpg" alt="Photo caption" caption="Kyoto, 2024" tilt={2} float="none" />

TornPaper

Decorativefull only

A decorative torn-paper edge divider to transition between content sections.

Props

Color

Flipfalse

MDX snippet

<TornPaper color="cream" flip={false} />

IndexCard

Decorativefull + medium

A lined index card for definitions, summaries, or reference material.

Quick Reference

Index cards are perfect for vocabulary definitions, formulas, or any reference material.

Props

Title

Color

Content

MDX snippet

<IndexCard title="Quick Reference" color="cream">
  Index cards are perfect for vocabulary definitions, formulas, or any reference material.
</IndexCard>

Stamp

Decorativefull only

A rubber-stamp overlay for status labels like DRAFT, APPROVED, or FEATURED.

APPROVED

Props

Label

Color

Rotate

MDX snippet

<Stamp label="APPROVED" color="blue" rotate="left" />

TapedH2

Decorativefull + medium

An H2 heading that looks like it has been taped to the page with washi tape.

Section Heading

Props

Tape Color

Heading

MDX snippet

<TapedH2 color="pink">Section Heading</TapedH2>

Pinboard

Decorativefull + medium

A corkboard panel that displays 1-4 pinned notes with a title.

Research Notes

First pinned idea or fact worth highlighting.

A second point to remember or explore further.

Supporting evidence or a useful reference link.

Props

Title

Note 1

Note 2

Note 3

MDX snippet

<Pinboard title="Research Notes">
  <div>First pinned idea or fact worth highlighting.</div>
  <div>A second point to remember or explore further.</div>
  <div>Supporting evidence or a useful reference link.</div>
</Pinboard>

FlipCard

Decorativefull + medium

A two-sided card that flips on click, ideal for before/after comparisons or flashcards.

Flash Card

Question

What is a competitive moat?

tap to flip ↺

Answer

A durable advantage that keeps competitors out, like a castle's moat.

Props

Front text

Back text

Front Color

Back Color

MDX snippet

<FlipCard
  frontColor="blue"
  backColor="green"
  front={<p>What is a competitive moat?</p>}
  back={<p>A durable advantage that keeps competitors out, like a castle's moat.</p>}
  frontLabel="Question"
  backLabel="Answer"
/>

Interactive(2)

Compare

Interactiveall intensities

A side-by-side comparison panel with colored headers and an optional badge.

Option A

Lower upfront cost. Flexible terms. Easy to change.

Option B

Better long-term value. Full ownership. No recurring fees.

Option A

Lower upfront cost. Flexible terms. Easy to change.

Option B

Better long-term value. Full ownership. No recurring fees.

Props

Left Title

Right Title

Left Content

Right Content

Left Color

Right Color

Badge

MDX snippet

<Compare
  leftTitle="Option A"
  rightTitle="Option B"
  leftColor="blue"
  rightColor="emerald"
  badge="VS"
>
  <div>Lower upfront cost. Flexible terms. Easy to change.</div>
  <div>Better long-term value. Full ownership. No recurring fees.</div>
</Compare>

Timeline

Interactiveall intensities

An interactive timeline of milestones. Click through them as a carousel, or open the panoramic view to see every milestone on a horizon line with horizontal scrolling.

Age of Exploration

Columbus reaches the Americas

Sailing west for a route to Asia, Columbus made landfall in the Bahamas.

1492

1498

Da Gama reaches India

Vasco da Gama opened the sea route from Europe to India around Africa.

Magellan's voyage begins

The first expedition to circumnavigate the globe set out from Spain.

1519

01 / 03

Props

Title

MDX snippet

<Timeline title="Age of Exploration">
  <Milestone date="1492" title="Columbus reaches the Americas">
    Sailing west for a route to Asia, Columbus made landfall in the Bahamas.
  </Milestone>
  <Milestone date="1498" title="Da Gama reaches India">
    Vasco da Gama opened the sea route from Europe to India around Africa.
  </Milestone>
</Timeline>

Academic(5)

Formula

Academicall intensities

A centered display equation rendered with KaTeX. Pass LaTeX via the tex prop. Use InlineFormula for math inside a sentence.

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

The quadratic formula

Props

LaTeX

Caption

MDX snippet

<Formula tex="x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}" label="The quadratic formula" />

InlineFormula

Academicall intensities

Inline math typeset with KaTeX, sized to flow within a paragraph of text.

Euler's identity, $e^{i\pi} + 1 = 0$ , links five fundamental constants.

Props

LaTeX

MDX snippet

Euler's identity, <InlineFormula tex="e^{i\pi} + 1 = 0" />, is elegant.

FormulaCard

Academicall intensities

A notebook-paper card presenting a formula with a 'where:' legend explaining each variable — ideal for teaching derivations.

Newton's second law

F = ma

where

$F$ net force (N)
$m$ mass (kg)
$a$ acceleration (m/s²)

Props

Title

LaTeX

MDX snippet

<FormulaCard
  title="Newton's second law"
  tex="F = ma"
  where={[{ symbol: "F", desc: "net force (N)" }, { symbol: "m", desc: "mass (kg)" }, { symbol: "a", desc: "acceleration (m/s²)" }]}
/>

ChemEquation

Academicall intensities

A chemical equation rendered with KaTeX's mhchem extension — handles reaction arrows, subscripts, and state symbols.

\ce{CO2 + H2O <=> H2CO3}

Carbonic acid equilibrium

Props

mhchem

Caption

MDX snippet

<ChemEquation tex="CO2 + H2O <=> H2CO3" caption="Carbonic acid equilibrium" />

Quantity

Academicall intensities

A physical quantity with value, optional uncertainty, and units — typeset so exponents and symbols look right.

Gravitational acceleration at sea level is $9.81 \pm 0.02\,\mathrm{m/s^2}$ .

Props

Value

Unit

Uncertainty

MDX snippet

<Quantity value="9.81" unit="m/s^2" uncertainty="0.02" />

Content(5)

Callout

Contentall intensities

A highlighted callout box for tips, warnings, insights, or important notices.

Tip: This is a callout that draws the reader's attention to something worth remembering.

Props

Type

Content

MDX snippet

<Callout type="tip">
  This is a callout that draws the reader's attention to something worth remembering.
</Callout>

Highlight

Contentall intensities

An inline text highlight with multiple colors and optional underline styling.

This sentence contains a highlighted phrase that draws the reader's eye to something important.

Props

Color

Underlinefalse

Highlighted text

MDX snippet

<Highlight color="yellow" underline={false}>
  highlighted phrase
</Highlight>

Term

Contentall intensities

An inline term with a tooltip definition, great for vocabulary in educational articles.

Every great company has a moatmoatA durable competitive advantage that protects a business from rivals. that keeps competitors at bay and protects long-term profits.

Props

Term

Definition

MDX snippet

<Term label="moat" definition="A durable competitive advantage that protects a business from rivals.">
  moat
</Term>

KeyStat

Contentall intensities

An emphasized inline statistic or number that makes key data points pop.

The company achieved a return on equity of 42% last year, outpacing the industry average.

Props

Stat

MDX snippet

The company achieved <KeyStat>42%</KeyStat> growth last year.

CircleNum

Contentall intensities

A circled number for step sequences, footnotes, or ordered lists with style.

1Step description or list item text goes here.

Props

Number

Filledfalse

MDX snippet

<CircleNum n={1} filled={false} />

Layout(4)

TwoCol

Layoutall intensities

A responsive two-column grid layout for side-by-side content blocks.

First block of content in the two-column layout.

Second block of content alongside the first.

Props

Left column

Right column

MDX snippet

<TwoCol>
  <div>First block of content in the two-column layout.</div>
  <div>Second block of content alongside the first.</div>
</TwoCol>

Ruled

Layoutall intensities

Ruled notebook paper styling with optional left margin line for body text.

This text sits on ruled notebook paper. The horizontal lines and red margin give it that classic school notebook feel.

Props

Margintrue

Line Color

Content

MDX snippet

<Ruled margin={true} lineColor="blue">
  This text sits on ruled notebook paper. The horizontal lines and red margin give it that classic school notebook feel.
</Ruled>

SketchDivider

Layoutall intensities

A hand-drawn style horizontal divider with an optional center label.

Props

Label

MDX snippet

<SketchDivider label="* * *" />

Squiggle

Layoutall intensities

An inline squiggly underline effect applied to text, like a hand-drawn emphasis.

This sentence contains a squiggly underline for creative emphasis.

Props

Color

Text

MDX snippet

<Squiggle color="primary">squiggly underline</Squiggle>