Overview

MDX brings the power of interactive components to your documentation by combining the simplicity of Markdown with the flexibility of JSX. This powerful combination allows you to create rich, dynamic content that engages your users and makes complex concepts easier to understand.

What is MDX?

MDX is a format that lets you seamlessly write JSX (React components) within your Markdown content. It extends traditional Markdown by enabling you to:

• Import and use React components in your documentation
• Create interactive documentation elements
• Build reusable content components
• Enhance your docs with dynamic features

Why Use MDX?

Enhanced Creativity

• Add interactive components to explain complex concepts
• Create custom behaviors for your documentation
• Build dynamic examples and demonstrations

Improved Reusability

• Write components once, use them throughout your docs
• Maintain consistency across your documentation
• Update shared components in one place

Future-Proof Documentation

• Scale your documentation with your product
• Add new interactive features as needed
• Maintain modern, dynamic documentation

Built-in MDX Components

ReadMe provides several powerful MDX components out of the box:

Tabs

Organize related content into easily navigable sections:

Example Code

<Tabs>
  <Tab title="First Tab">
    Welcome to the content that you can only see inside the first Tab.
  </Tab>

  <Tab title="Second Tab">
    Here's content that's only inside the second Tab.
  </Tab>

  <Tab title="Third Tab">
    Here's content that's only inside the third Tab.
  </Tab>
</Tabs>

Accordion

Present information in collapsible sections:

Example Code

<Accordion title="My Accordion Title" icon="fa-info-circle">
  Lorem ipsum dolor sit amet, **consectetur adipiscing elit.** Ut enim
  ad minim veniam, quis nostrud exercitation ullamco. Excepteur sint
  occaecat cupidatat non proident!
</Accordion>

Cards

Display content in a clean, grid-like format:

Example Code

<Cards columns={4}>
  <Card title="First Card" href="https://readme.com" icon="fa-home" target="_blank">
    Neque porro quisquam est qui dolorem ipsum quia
  </Card>

  <Card title="Second Card" icon="fa-user">
    *Lorem ipsum dolor sit amet, consectetur adipiscing elit*
  </Card>

  <Card title="Third Card" icon="fa-star">
    > Ut enim ad minim veniam, quis nostrud ullamco
  </Card>

  <Card title="Fourth Card" icon="fa-question">
    **Excepteur sint occaecat cupidatat non proident**
  </Card>
</Cards>

Getting Started

MDX works alongside your existing Markdown content, so you can:

• Continue using familiar Markdown syntax.
• Gradually incorporate MDX components.
• Mix Markdown, HTML, and JSX as needed.

Ready to start using MDX in your documentation? Check out our detailed guide on Using MDX for practical examples and implementation details.