Component Playground#

Every example below is a live, working preview — not just a code snippet. Use the Preview/Code tabs to see the component actually render, then copy the code for your own MDX files. The full component documentation pages still have the deepest prop-by-prop reference.

UnifiedMetrics#

Basic Example#

Card Variant#

Minimal Variant#

See Full UnifiedMetrics Documentation →

UnifiedInfo#

Alert Variant (Info)#

Alert Variant (Warning)#

Card Variant (Success)#

Grid Variant#

UnifiedInfo doesn't implement a grid/item variant itself — use the InfoGrid + InfoItem helpers:

See Full UnifiedInfo Documentation →

Timeline#

ProjectCard#

Highlight#

TechStack#

CodeBlock#

1import { apiClient } from '@/lib/api'
2
3async function fetchUserData(userId: string) {
4try {
5const response = await apiClient.get('/users/' + userId)
6return response.data
7} catch (error) {
8console.error('Failed to fetch user:', error)
9throw error
10}
11}

CodeSandbox#

A self-contained, runnable HTML/CSS/JS playground — edit any pane and hit Run to see it update live. Executes entirely in a sandboxed <iframe> (no allow-same-origin, no external bundler service), so visitor-edited code can never touch this page's cookies, storage, or DOM.

<CodeSandbox
  title="Counter demo"
  html={`<button id="btn">Clicked 0 times</button>`}
  css={`
    button {
      font: inherit;
      padding: 0.5rem 1rem;
    }
  `}
  js={`let count = 0;
document.getElementById('btn').addEventListener('click', () => {
  count += 1;
});`}
/>

CompanyCard#

FeatureGrid#

ComparisonTable#

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#

The snippets below are page-level skeletons (with [...] placeholders for your own data), so they're kept as copy-paste code rather than live previews — see the fully live examples above for each individual component.

Dashboard Layout#

# Dashboard

<UnifiedMetrics
  title="Key Metrics"
  variant="card"
  columns={3}
  metrics={[...]}
/>

<InfoGrid columns={2}>
  <InfoItem title="Feature 1" description="..." />
  <InfoItem title="Feature 2" description="..." />
</InfoGrid>

Documentation Page#

# Documentation Page

<Highlight type="info" title="Overview">
  Introduction text
</Highlight>

## Section

Content here...

<CodeBlock language="typescript" filename="example.ts">
{\`code here\`}
</CodeBlock>

Project Showcase#

# Project

<ProjectCard
  title="Project Name"
  description="Details"
  technologies={[...]}
  achievements={[...]}
  metrics={[...]}
/>

<Timeline
  title="Timeline"
  items={[...]}
/>

Copy & Paste Templates#

Generic starting points — copy, then swap in your own content.

Info Section#

<UnifiedInfo type="info" variant="alert" title="Quick Info">
  Your information here
</UnifiedInfo>

Metrics Dashboard#

Feature Highlights#

<InfoGrid columns={3}>
  <InfoItem title="Feature 1" description="Description 1" />
  <InfoItem title="Feature 2" description="Description 2" />
  <InfoItem title="Feature 3" description="Description 3" />
</InfoGrid>

Need More Examples?#

Visit the comprehensive documentation pages for detailed examples, props documentation, and best practices:

• Component Overview
• Migration Guide
• Component API Reference