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.

Timeline - Visual timelines with achievements and metrics
ProjectCard - Project showcase cards
CompanyCard - Company overview cards
FeatureGrid - Grid layout for features

Metrics & Stats Components#

Unified components for displaying metrics, statistics, and KPIs.

UnifiedMetrics - Consolidated metrics display
MetricsCard - Performance metrics (deprecated, use UnifiedMetrics)
MetricsGrid - Grid layout metrics (deprecated)
StatsGrid - Statistics grid (deprecated)

Information Components#

Unified components for displaying information, alerts, and callouts.

UnifiedInfo - Consolidated info display
Highlight - Callout boxes with types
InfoBox - Alert-style boxes (deprecated)
InfoCard - Information cards (deprecated)

Technical Documentation#

Components for code, diagrams, and technical content.

CodeBlock - Enhanced code blocks with syntax highlighting
MermaidChart - Diagram rendering
TechStack - Technology stack display
TechnicalDetails - Architecture details
ComparisonTable - Side-by-side comparisons

API Documentation#

Specialized components for API documentation.

APIEndpoint - Individual endpoint documentation
APIOverview - API platform overview
EndpointGroup - Grouped endpoints
QuickStart - Quick start guides

Career & Experience#

Components for professional experience and career progression.

RoleOverview - Role summary
CareerTimeline - Career progression
SkillsShowcase - Skills by category
TeamLeadership - Team structure

🚀 Quick Start#

Basic Usage#

All components are available in MDX files without imports:

It works!

You can use any custom component directly in your MDX content.

My Timeline

Achievement 1

2024

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 Component	New Component	Migration
`MetricsCard`	`UnifiedMetrics`	Use `variant="default"`
`MetricsGrid`	`UnifiedMetrics`	Use `variant="card"`
`StatsGrid`	`UnifiedMetrics`	Use `variant="minimal"`
`InfoBox`	`UnifiedInfo`	Use `variant="alert"`
`InfoCard`	`UnifiedInfo`	Use `variant="card"`
`InfoSection`	`UnifiedInfo`	Use `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.

💡 Need Help?#

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