Interactive MDX

Last updated Jul 2, 2026

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.

Define your tabs: Create a container that lists the available options.
Add content: Insert a content section for each option listed in your container.
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.

Wrap your list: Place your series of instructions inside a dedicated container.
Define individual steps: Each action or requirement should be wrapped as an individual step.
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.