MDX Components Demo

This article demonstrates all the beautiful MDX components available in QE Hub's new design system.

Alerts and Callouts

Cards

Badges

Here are some example badges:

Code Blocks

Here's an example of syntax-highlighted code:

// Example API testing code
async function testAPI() {
  const response = await fetch('https://api.example.com/users');
  const data = await response.json();
  
  console.log('API Response:', data);
  
  // Assertions
  expect(response.status).toBe(200);
  expect(data).toHaveLength(10);
}
 
testAPI();

And here's a Python example:

import requests
 
def test_api():
    """Test API endpoint"""
    response = requests.get('https://api.example.com/users')
    data = response.json()
    
    assert response.status_code == 200
    assert len(data) == 10
    
    print(f"Found {len(data)} users")
 
test_api()

Links

Internal links: Browse Articles

External links automatically get an icon: Google

Anchor links: Jump to Code Blocks

Images

GitHub Card

YouTube Embed

Tech Icons

Tweet Card

QE Hub

@qehub

Just launched our new design system! 🎨 Check out the beautiful MDX components and improved theme. Perfect for documentation and technical content.

2 hours ago

5

12

42

Inline Code

Use backticks for inline code like npm install or const example = "value".

Lists

Unordered List

• First item
• Second item
• Third item with bold text
• Fourth item with italic text

Ordered List

1. Step one
2. Step two
3. Step three
4. Step four

Blockquotes

This is a blockquote. Use it to highlight quotes, testimonials, or important excerpts.

— Source Author

Tables

Summary

This demonstrates the complete set of MDX components available in QE Hub. All components are:

• ✅ Theme-aware (work in light and dark modes)
• ✅ Accessible (WCAG compliant)
• ✅ Responsive (mobile-friendly)
• ✅ Customizable (via props and CSS variables)