Custom MDX Components

Comprehensive guide to all custom components available in MDX content

Custom MDX Components

Welcome to the complete reference for all custom MDX components available in your content. These components enhance your documentation and blog posts with rich, interactive elements.

Component Overview

This site includes 40+ custom React components specifically designed for technical documentation, blog posts, and project showcases. All components are optimized for performance, accessibility, and dark mode.

📚 Component Categories

Display Components

Visual components for showcasing content and information.

Metrics & Stats Components

Unified components for displaying metrics, statistics, and KPIs.

Information Components

Unified components for displaying information, alerts, and callouts.

Technical Documentation

Components for code, diagrams, and technical content.

API Documentation

Specialized components for API documentation.

Career & Experience

Components for professional experience and career progression.

🚀 Quick Start

Basic Usage

All components are available in MDX files without imports:

📄Mdx
---
title: "My Page"
---

# My Content

<Highlight type="success" title="It works!">
  You can use any custom component directly in your MDX content.
</Highlight>

<Timeline
  title="My Timeline"
  items={[
    { date: '2024', title: 'Achievement 1', description: 'Details...' }
  ]}
/>

Component Props

Each component accepts specific props for customization. See individual component documentation for details.

TypeScript Support

All components are fully typed with TypeScript interfaces. Use your IDE's autocomplete to explore available props.

📖 Component Migration

Deprecated Components

Some components have been consolidated for better maintainability:

Old ComponentNew ComponentMigration
MetricsCardUnifiedMetricsUse variant="default"
MetricsGridUnifiedMetricsUse variant="card"
StatsGridUnifiedMetricsUse variant="minimal"
InfoBoxUnifiedInfoUse variant="alert"
InfoCardUnifiedInfoUse variant="card"
InfoSectionUnifiedInfoUse variant="section"

Backward Compatibility

Deprecated components still work for backward compatibility, but we recommend migrating to the new unified components for better performance and maintainability.

🎨 Component Playground

Visit the Component Playground to see live examples and experiment with different component configurations.

📝 Best Practices

Performance

  • Use lazy loading for heavy components
  • Avoid nesting too many components
  • Optimize images and media

Accessibility

  • All components support keyboard navigation
  • Screen reader friendly
  • Proper ARIA labels included

Dark Mode

  • All components adapt to dark/light themes
  • No additional configuration needed
  • Test components in both modes

🔍 Search Components

Use the search feature (CMD/CTRL + K) to quickly find components and their documentation.

📚 Related Resources

💡 Need Help?

If you can't find the component you need or have questions:

Use Ctrl + ← / → to navigate
Previous
First page
Next
Last page
Back to Documentation Home