MDX Components Demo - Interactive Elements in Blog Posts
Learn how to use interactive React components in your blog posts with MDX. Includes Callouts, Cards, Tabs, Accordions, and more.
Using Interactive Components in MDX
With our new MDX-powered blog, you can now use React components directly in your blog posts! This makes your content more engaging and interactive.
Callouts
Use callouts to highlight important information:
This is an informational callout. Perfect for tips and helpful notes!
This is a warning callout. Use it to highlight potential issues or things to be careful about.
Great job! This is a success callout for positive messages.
Oops! This is an error callout for highlighting problems.
💡 This is a tip callout for sharing expert advice and best practices!
Cards
Group related content in beautiful cards:
Getting Started
Cards are perfect for highlighting key concepts or creating visual separation in your content. You can include any markdown content inside!
- Feature 1
- Feature 2
- Feature 3
Advanced Features
You can have multiple cards in a row to create a nice layout. Each card maintains its own styling and spacing.
Tabs
Create tabbed content for showing different options:
Here's how to do it in JavaScript:
const colors = ['red', 'blue', 'green']; console.log(colors);Step-by-Step Guides
Use the Step component for tutorials:
Install Dependencies
First, install the required packages using npm or yarn:
npm install huestackConfigure Your Project
Create a configuration file in your project root:
// huestack.config.js
export default {
colors: ['purple', 'blue'],
shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
}Start Using HueStack
Now you're ready to start generating beautiful color palettes!
Accordions
Create collapsible FAQ sections:
Yes! You can create custom React components and add them to the mdx-component.tsx file to make them available in all blog posts.
Comparison Tables
Show feature comparisons easily:
| Feature | Free | Pro |
|---|---|---|
| Color Palettes | ||
| Accessibility Checker | ||
| Actions per Month | 100 | Unlimited |
| Export Formats | 3 | 10+ |
| Priority Support |
Standard Markdown Features
Of course, all standard markdown features still work:
Code Blocks with Syntax Highlighting
interface ColorPalette {
name: string
shades: {
[key: number]: string
}
}
const palette: ColorPalette = {
name: 'purple',
shades: {
500: '#8B5CF6',
600: '#7C3AED'
}
}Tables
| Feature | HueStack | Alternative |
|---|---|---|
| Free Tier | 100 actions | 10 actions |
| Tailwind Native | ✅ Yes | ❌ No |
| Accessibility | ✅ WCAG AAA | ⚠️ Basic |
Lists
Unordered:
- Beautiful color palettes
- Accessibility checking
- Multiple export formats
Ordered:
- Choose your base colors
- Generate shades automatically
- Check accessibility
- Export to your project
Blockquotes
"HueStack has completely transformed how I work with colors in Tailwind CSS. The MDX blog is a game-changer!" - Happy Developer
Conclusion
With MDX, your blog posts can be interactive, engaging, and beautiful! Use these components to create professional documentation-style content that stands out.
Try using these components in your next blog post. They're all available automatically in any .mdx file!
HueStack Team
Writing about Tailwind CSS, color theory, and modern web development.