MDX components showcase
Living reference for rich MDX components available in insights articles.
GTM Architect & Growth Operator · Now · 19 May 2026
TL;DR · Key insights
- Stat and StatRow give numbers their own weight
- DoDont replaces wishy-washy advice with two columns of opinion
- Steps, PullQuote, TechStack and TOC cover the second MDX component batch
- Drop-in site UI components work in MDX now
The TL;DR above is auto-rendered from frontmatter. Below: every rich component, in one place.
Stat + StatRow
Use for proof-led storytelling. Tabular nums, big lime numbers.
47%
Pipeline lift
Quarter over quarter
3 wks
From idea to shipped
€0
Tooling cost
Cloudflare + Astro stack
DoDont
Sadowski-style. No hedging.
- Hire an operator who already shipped this
- Wire CRM, SEO and paid into one system
- Measure pipeline, not impressions
- Hire an agency to 'do growth'
- Buy six tools that don't talk to each other
- Optimize for vanity metrics
Steps
Use for process sections where the order matters more than paragraph rhythm.
Migration loop
- Freeze the source of truth
Decide which repo and route own the canonical page before touching copy.
- Move one layer at a time
Routes, content, components and deploy rules should each have a clear verification point.
- Ship with a rollback path
The migration is done only when production, redirects and analytics agree.
PullQuote
A site rebuild is not a design exercise. It is a decision about who owns the system after launch.
TechStack
Publishing stack
The article layer is deliberately boring: files, components, build output, deploy checks.
Content
Delivery
Callout (existing)
Drop-in site components
Now usable in MDX. Inline <Badge>AI-native</Badge> works in text flow.
Reference
Use anywhere
Can I use Badge inline?
Yes: wrap any text with <Badge>label</Badge>.
Do these respect dark mode?
All use design tokens, so themes follow automatically.
Next step
Want this stack?
The whole site runs on Astro + Cloudflare Pages + MDX. Open source-ish.
Diagrams: Box + Arrow + Stack
Declarative primitives. No Mermaid, no SVG editor: just nested components.
Linear flow (most common):
Branching (fan-out via Stack):
Layered architecture (vertical):
Interactive components
Tabs
Accordion
What is MCP?
How does the agent stack work?
What does it cost to run?
CodeBlock
