MDX Interactive Components

This post demonstrates the interactive components available in MDX. Try them out!

Counter Component

The <Counter /> component tracks state and responds to clicks:

Click Counter: 0

You can reset, increment, or decrement the count!

Toggle Component

Use <Toggle /> to switch between two states:

Feature Switch: Feature Off

Perfect for showing/hiding features or toggling settings.

Tabs Component

The <Tabs /> component displays tabbed content using nested <TabItem /> components:

❌ No tabs found
✓ Use nested TabItem components:
<Tabs> <TabItem label="Tab 1">Content</TabItem> </Tabs>

Dynamic Content

MDX supports JavaScript expressions inline using JSX:

• Current year:
• Today's date:
• Random number:

How to Use These

In your .mdx files, simply use the components:

<Counter initial={5} label="My Counter" />

<Toggle label="Enable Dark Mode" onText="Dark" offText="Light" />

<Tabs items={[
  { label: "Tab 1", content: "Content here" },
  { label: "Tab 2", content: "More content" }
]} />

Creating Custom Components

Want to add more interactive components?

  1. Create a new file in src/components/mdx/
  2. Mark it with 'use client' (client component)
  3. Export your component
  4. Add it to the imports in src/lib/utils.tsx
  5. Add it to the components object in parseFileToReactWithMDX

Then use it in any .mdx file! 🚀