Mastering MDX Components in Astro

May 24, 2025

🚀 Introduction

This article showcases all custom MDX components we’ve built for a delightful technical blogging experience in Astro.

MDX allows you to seamlessly combine Markdown and JSX — enabling you to use React-like components within your Markdown files.

🔧 Features Covered

1. Using Custom Callouts

Note

Keep your notes concise. These components help your readers digest information easily.

2. Code Highlighting

Here’s how to declare a simple useState hook in React:

   import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

3. Quotes

“The only way to do great work is to love what you do.”
— Steve Jobs

Simplicity is the ultimate sophistication.

4. Images with Captions

React performance infographic
Fig 1: React performance breakdown chart

5. Nested Headings

Markdown + Astro Components = ❤️

Here’s a combination that gives you full control over presentation, reusability, and structure.

🧾 References

Note