Component Playground
Interactive preview and testing environment for all custom MDX components
Component Playground
Copy these code snippets to use components in your own MDX files. See the full component documentation for detailed props and examples.
Code Snippets
This playground provides copy-paste ready code snippets for all components. For live examples, see the individual component documentation pages.
UnifiedMetrics
Basic Example
📄Mdx
<UnifiedMetrics
title="Project Metrics"
variant="default"
columns={3}
metrics={[
{
label: "Total Projects",
value: "50+",
icon: "target",
color: "blue",
description: "Completed projects"
},
{
label: "Lines of Code",
value: "100K+",
icon: "trending",
color: "green",
trend: "+25%",
trendDirection: "up"
},
{
label: "Technologies",
value: "25+",
icon: "zap",
color: "purple"
}
]}
/>
Card Variant
📄Mdx
<UnifiedMetrics
variant="card"
size="lg"
metrics={[
{
label: "API Response Time",
value: "< 100ms",
icon: "zap",
color: "green",
trend: "-30%",
trendDirection: "down"
}
]}
/>
Minimal Variant
📄Mdx
<UnifiedMetrics
variant="minimal"
size="sm"
columns={4}
showDescriptions={false}
metrics={[
{ label: "Active", value: "24/7", color: "green" },
{ label: "Status", value: "Healthy", color: "blue" }
]}
/>
See Full UnifiedMetrics Documentation →
UnifiedInfo
Alert Variant (Info)
📄Mdx
<UnifiedInfo type="info" variant="alert" title="Information">
Your informational message here
</UnifiedInfo>
Alert Variant (Warning)
📄Mdx
<UnifiedInfo type="warning" variant="alert" title="Caution">
**Warning**: Important warning message
</UnifiedInfo>
Card Variant (Success)
📄Mdx
<UnifiedInfo type="success" variant="card" title="Success!">
✅ Operation completed successfully!
</UnifiedInfo>
Grid Variant
📄Mdx
<UnifiedInfo variant="grid" columns={3} gap={6}>
<UnifiedInfo variant="item" type="success" title="Fast">
Lightning-fast performance
</UnifiedInfo>
<UnifiedInfo variant="item" type="info" title="Secure">
Enterprise-grade security
</UnifiedInfo>
<UnifiedInfo variant="item" type="tip" title="Scalable">
Auto-scales seamlessly
</UnifiedInfo>
</UnifiedInfo>
See Full UnifiedInfo Documentation →
Timeline
📄Mdx
<Timeline
title="Project Timeline"
items={[
{
date: "2024 Q4",
title: "Production Launch",
description: "Successfully launched to production",
status: "completed",
metrics: [
{ label: "Users", value: "10K+" }
]
},
{
date: "2024 Q3",
title: "Beta Testing",
description: "Comprehensive beta testing",
status: "completed",
achievements: [
"1,000+ beta testers",
"95% satisfaction rate"
]
}
]}
/>
ProjectCard
📄Mdx
<ProjectCard
title="AI-Powered Developer Platform"
description="Built a comprehensive developer platform with AI features"
status="completed"
period="2023-2024"
team="Engineering Team (15 members)"
link="/docs/projects/ai-platform"
technologies={["React", "TypeScript", "Node.js", "OpenAI"]}
achievements={[
"Reduced development time by 40%",
"99.9% platform uptime",
"10,000+ active developers"
]}
metrics={[
{ label: "Users", value: "10K+", color: "blue" },
{ label: "Uptime", value: "99.9%", color: "green" }
]}
/>
Highlight
📄Mdx
<Highlight type="info" title="Information">
Your information here
</Highlight>
<Highlight type="warning" title="Important Warning">
Warning message
</Highlight>
<Highlight type="success" title="Great Job!">
Success message
</Highlight>
<Highlight type="tip" title="Pro Tip">
Helpful tip
</Highlight>
TechStack
📄Mdx
<TechStack
title="Technology Stack"
technologies={[
{
name: "React",
category: "Frontend",
proficiency: 95,
description: "Advanced React patterns and performance optimization"
},
{
name: "TypeScript",
category: "Language",
proficiency: 90,
description: "Type-safe development"
},
{
name: "Node.js",
category: "Backend",
proficiency: 88,
description: "RESTful APIs and microservices"
}
]}
/>
CodeBlock
📄Mdx
<CodeBlock
language="typescript"
title="API Request Example"
showLineNumbers={true}
>
{\`
import { apiClient } from '@/lib/api'
async function fetchUserData(userId: string) {
try {
const response = await apiClient.get(\\\`/users/\\\${userId}\\\`)
return response.data
} catch (error) {
console.error('Failed to fetch user:', error)
throw error
}
}
\`}
</CodeBlock>
CompanyCard
📄Mdx
<CompanyCard
company="Company Name"
role="Your Role"
period="2021 - Present"
location="Location"
description="Role description and responsibilities"
achievements={[
"Achievement 1",
"Achievement 2"
]}
technologies={["React", "Node.js", "AWS"]}
/>
FeatureGrid
📄Mdx
<FeatureGrid
title="Platform Features"
features={[
{
icon: "⚡",
title: "Lightning Fast",
description: "Sub-100ms response times",
link: "/docs/features/performance"
},
{
icon: "🔒",
title: "Secure by Default",
description: "Enterprise-grade security",
link: "/docs/features/security"
},
{
icon: "📈",
title: "Auto-Scaling",
description: "Scales automatically",
link: "/docs/features/scaling"
}
]}
columns={3}
/>
ComparisonTable
📄Mdx
<ComparisonTable
title="Plan Comparison"
headers={["Feature", "Free", "Pro", "Enterprise"]}
rows={[
{
feature: "API Calls",
free: "1,000/month",
pro: "100,000/month",
enterprise: "Unlimited"
},
{
feature: "Support",
free: "Community",
pro: "Email (24h)",
enterprise: "Phone (1h)"
},
{
feature: "Custom Domain",
free: "❌",
pro: "✅",
enterprise: "✅"
}
]}
/>
Quick Reference
Component Documentation
- UnifiedMetrics - Metrics and KPIs
- UnifiedInfo - Information boxes and alerts
- Timeline - Visual timelines
- ProjectCard - Project showcases
- TechStack - Technology proficiency
- CodeBlock - Enhanced code display
- FeatureGrid - Feature grids
- ComparisonTable - Side-by-side comparisons
Common Patterns
Dashboard Layout
📄Mdx
# Dashboard
<UnifiedMetrics
title="Key Metrics"
variant="card"
columns={3}
metrics={[...]}
/>
<UnifiedInfo variant="grid" columns={2}>
<UnifiedInfo variant="item" title="Feature 1">...</UnifiedInfo>
<UnifiedInfo variant="item" title="Feature 2">...</UnifiedInfo>
</UnifiedInfo>
Documentation Page
📄Mdx
# Documentation Page
<Highlight type="info" title="Overview">
Introduction text
</Highlight>
## Section
Content here...
<CodeBlock language="typescript" title="Example">
{\`code here\`}
</CodeBlock>
Project Showcase
📄Mdx
# Project
<ProjectCard
title="Project Name"
description="Details"
technologies={[...]}
achievements={[...]}
metrics={[...]}
/>
<Timeline
title="Timeline"
items={[...]}
/>
Copy & Paste Templates
Info Section
📄Mdx
<UnifiedInfo type="info" variant="alert" title="Quick Info">
Your information here
</UnifiedInfo>
Metrics Dashboard
📄Mdx
<UnifiedMetrics
title="Dashboard"
variant="card"
columns={3}
metrics={[
{ label: "Metric 1", value: "100", icon: "trending", color: "blue" },
{ label: "Metric 2", value: "200", icon: "users", color: "green" },
{ label: "Metric 3", value: "300", icon: "dollar", color: "purple" }
]}
/>
Feature Highlights
📄Mdx
<UnifiedInfo variant="grid" columns={3}>
<UnifiedInfo variant="item" title="Feature 1">Description 1</UnifiedInfo>
<UnifiedInfo variant="item" title="Feature 2">Description 2</UnifiedInfo>
<UnifiedInfo variant="item" title="Feature 3">Description 3</UnifiedInfo>
</UnifiedInfo>
Need More Examples?
Visit the comprehensive documentation pages for detailed examples, props documentation, and best practices: