---
title: "Interactive MDX"
description: "Interactive MDX brings dynamic elements to your documentation, allowing you to organize information into engaging, user-friendly formats. Instead of static blocks of text, you can use these tools t..."
last_updated: "2026-07-02T09:48:33.549192+00:00"
canonical_url: "https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/guide/how-to-guides/interactive-mdx"
---

Interactive MDX brings dynamic elements to your documentation, allowing you to organize information into engaging, user-friendly formats. Instead of static blocks of text, you can use these tools to create structured steps, selectable tabs, and informative cards that help readers process complex details more efficiently.

## Using Tabs
Tabs allow you to group related content into a single space, letting readers switch between different views (such as different operating systems or programming languages) without cluttering the page.

1.  **Define your tabs:** Create a container that lists the available options.
2.  **Add content:** Insert a content section for each option listed in your container.
3.  **Link them:** Ensure each content section corresponds to a tab title.

> [!TIP]
> Use tabs to show "Compare" or "Switch" views for content that changes based on user preference, like command-line instructions for Windows vs. macOS.

## Using Steps
The Steps feature breaks down complicated procedures into clear, sequential actions. This improves readability for tutorials and installation guides.

1.  **Wrap your list:** Place your series of instructions inside a dedicated container.
2.  **Define individual steps:** Each action or requirement should be wrapped as an individual step.
3.  **Result:** The system automatically styles these with visual indicators to guide the reader through the workflow.

## Using Cards
Cards are ideal for grouping links, resource summaries, or navigation elements. They provide a visual "tile" that is much easier to scan than a standard list of links.

*   **Standard Cards:** Use these to display a title, description, and an icon.
*   **Interactive Cards:** By adding a link to a card, the entire box becomes clickable, providing a high-quality user experience for navigation.

## Key Concepts

| Term | Definition |
| :--- | :--- |
| **Container** | A wrapper that holds interactive elements together. |
| **Tab List** | The header area that displays the selectable options. |
| **Tab Content** | The specific information that appears when a tab is selected. |
| **Visual Indicators** | Styling applied to steps to show progression. |

> [!NOTE]
> When using tabs, ensure that you provide a clear label for each one. If you leave a tab value blank, the system may struggle to connect the selection to the correct content.

> [!WARNING]
> Keep tab names short. If you use long labels, the tab bar may overflow on smaller mobile screens, making it difficult for the user to navigate the options.

> [!IMPORTANT]
> Always ensure your step-by-step instructions are logically ordered. While the system handles the visual presentation, the clarity of the process relies entirely on your step sequence.

## Related

- [Writing Content](https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/guide/core-features/writing-content)


## Sitemap

See the full [sitemap](https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/llms.txt) for all pages in this wiki.