brandon is writing — MDX Component Showcase

This page tests every component in the MDX library. It serves as a living reference for what's available in any .mdx content file.

Callout

PullQuote

Any sufficiently advanced technology is indistinguishable from magic.
— Arthur C. Clarke

CodeBlock

src/lib/mdx.ts

import { compileMDX } from 'next-mdx-remote/rsc';

export async function compileMdx(source, components) {
const result = await compileMDX({ source, components });
return result.content;
}

bash

npm install next-mdx-remote shiki

Divider

Content after a plain divider.

ResourceCard

Next.js — Server Components

How React Server Components work in the App Router, including when to use them and their trade-offs.

nextjs.org

Shiki — Syntax Highlighter

A beautiful syntax highlighter powered by TextMate grammars and VS Code themes.

shiki.style

InternalContentPreview

writing

Becoming A Master Of My Domain

The rundown of this space.

FileTree

src

components

mdx

callout.tsx

code-block.tsx

divider.tsx

file-tree.tsx

image-with-caption.tsx

pull-quote.tsx

resource-card.tsx

video-embed.tsx

index.ts

lib

mdx.ts

shiki.ts

VideoEmbed

Example embedded video