MDX Components Reference

This is a draft reference post. It won’t appear on the blog index, but you can open it directly at /blog/mdx-components-reference during development to see how each component renders. Components are wired globally — no import needed in your MDX file.

Callout

Three variants: note (blue), tip (pink), warn (yellow). The label defaults to the variant name; pass title to override.

Figure (in-flow, captioned)

Stays inside the reading column. Use for screenshots and diagrams that benefit from a caption.

<Figure src="/gallery/placeholder-2.webp" alt="A placeholder render used as a figure example." caption="Figure 1 — The default cube is a rite of passage." />

WideImage (breaks out of the container)

Breaks out of the 60ch reading column toward the full viewport width (capped at the 1200px container max). Use for hero renders and wide screenshots.

<WideImage src="/gallery/placeholder-1.webp" alt="A wide placeholder render breaking out of the reading column." caption="Cycles render — 1024 samples, denoised with OpenImageDenoise." />

Video

Self-hosted <video> with controls, optional poster and caption. MIME is inferred from the file extension; pass type to override. Drop your files in public/ (e.g. public/blog-assets/).

<Video src="/blog-assets/spin.mp4" caption="A 360° turntable of the model." />

Supports loop, muted, autoplay, playsinline (default true), and poster for short clips that should preview as a thumbnail.

Rehype Pretty Code Examples

const this = 'a variable';
const num = 3;

const this = 'a variable';
const num = 3;

const this = 'a variable';
const num = 3;