MDX Showcase

This page demonstrates the power of MDX - combining Markdown with React components for interactive documentation.

Interactive Counter

MDX allows you to embed interactive React components directly in your documentation. Here's a simple counter with state:

0
import { Counter } from "../../components/Showcase";
 
<Counter />;

Alert Components

Display important information with styled alerts:

Information

This is an informational alert. Use it to highlight helpful tips.

Success

Operation completed successfully! Your changes have been saved.

Warning

Be careful! This action may have unintended consequences.

Error

Something went wrong. Please try again later.

<Alert type="info" title="Information">
  This is an informational alert.
</Alert>

Tabs Component

Organize content into tabbed sections:

npm install frame-master

Card Grid

Display features or links in a grid layout:

Fast Development

Hot Module Replacement for instant feedback during development.

Type Safe

Full TypeScript support with auto-generated types.

Easy to Use

Simple configuration and intuitive API design.

Edge Ready

Deploy to Cloudflare Pages for global performance.

Badges

Use inline badges to highlight status or categories: Default Success Warning Error

Accordion

Expandable FAQ-style content:

Using Variables

You can also use JavaScript expressions in MDX:

export const version = "1.0.0";
 
Current version: {version}

Mixing Markdown & JSX

MDX seamlessly blends Markdown and JSX. You can:

  1. Write standard Markdown with formatting
  2. Use inline code and code blocks
  3. Embed React components anywhere
  4. Pass props dynamically

Ready to Build

You now have all the tools to create amazing interactive documentation!

← Back to Home