MDX Component Showcase

2026-03-08

​

MDX lets you embed interactive React components directly in your writing. This post is a living reference — every component below is rendered live.

Callout

Highlighted blocks for tips, warnings, and important notes.

ℹī¸

This is an informational callout. Use it for general context.

💡

Pro tip: You can nest Markdown inside callouts — bold, italic, code, and links all work.

⚠ī¸

Watch out — this pattern has a known edge case you should handle.

🚨

This action is irreversible. Proceed with caution.

Usage:

<Callout type="info">Your message here.</Callout>

Types: info | tip | warning | danger

Image

Next.js optimized images with automatic lazy loading.

Demo image

Usage:

<Image src="/images/photo.jpg" alt="Description" width={800} height={400} />

ProsCard and ConsCard

Side-by-side comparison cards for trade-off analysis.

You might use MDX if...
Embed React components inline
Full Markdown support
Syntax highlighting built in
You might not use MDX if...
Slightly more complex than plain Markdown
Requires a build step
Not natively supported by Obsidian

Usage:

<ProsCard title="Tool" pros={["Benefit one", "Benefit two"]} />
<ConsCard title="Tool" cons={["Drawback one", "Drawback two"]} />

YouTubeEmbed

Responsive embedded videos. No tracking scripts — just an iframe.

Usage:

<YouTubeEmbed id="dQw4w9WgXcQ" />

CodeSandbox

Interactive code editors embedded directly in the post.

Usage:

<CodeSandbox id="your-sandbox-id" />

Writing Tips

  • Keep components minimal — most posts should be plain Markdown
  • Use .mdx only when a component genuinely adds value
  • Plain .md files from Obsidian render identically for text content
  • All components above are globally available — no imports needed in .mdx files