Power of MDX with Code and Components

2025-05-18

The Power of MDX

MDX allows you to write Markdown and use React components in the same file. This gives you the ability to mix prose with interactive UI.

💡 Callout: Embedded Component

Let's render a custom component here:

🧑‍💻 Syntax Highlighting with Shiki

With rehype-pretty-code, you get beautifully themed VS Code-style syntax highlighting:

type Props = { name: string }
 
export default function Hello({ name }: Props) {
  return <p>Hello, {name}!</p>
}