UI ComponentsContent
BlogPost
Full blog post page with content, author, and related posts
Full blog post page with content, author bio, table of contents, and related posts.
Structure
Default Layout
┌─────────────────────────────────────────────────────┐
│ root │
│ ┌─────────────────────────────────────────────────┐ │
│ │ header │ │
│ │ category │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ title │ │ │
│ │ │ The Future of Web Development │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ meta │ │ │
│ │ │ ┌────┐ Jane Doe · Dec 15, 2024 · 8 min read │ │ │
│ │ │ │ 👤 │ │ │ │
│ │ │ └────┘ │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ cover │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ cover-image │ │ │
│ │ │ │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ │ cover-caption │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ content-wrapper │ │
│ │ ┌─────────┐ ┌─────────────────────────────────┐ │ │
│ │ │ toc │ │ content │ │ │
│ │ │ ┌─────┐ │ │ │ │ │
│ │ │ │ On │ │ │ Introduction │ │ │
│ │ │ │this │ │ │ │ │ │
│ │ │ │page │ │ │ Lorem ipsum dolor sit amet... │ │ │
│ │ │ │ │ │ │ │ │ │
│ │ │ │• H1 │ │ │ ## Section Title │ │ │
│ │ │ │• H2 │ │ │ │ │ │
│ │ │ │• H3 │ │ │ More content here... │ │ │
│ │ │ └─────┘ │ │ │ │ │
│ │ └─────────┘ └─────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ tags │ │
│ │ │React│ │TypeScript│ │Web Dev│ │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ share │ │
│ │ [🐦 Tweet] [💼 LinkedIn] [📧 Email] [🔗 Copy] │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ author-bio │ │
│ │ ┌────────┐ ┌────────────────────────────────┐ │ │
│ │ │ avatar │ │ Jane Doe │ │ │
│ │ │ │ │ Senior Developer at Acme Corp │ │ │
│ │ │ │ │ [🐦] [💼] [🔗] │ │ │
│ │ └────────┘ └────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ navigation │ │
│ │ ┌───────────────────┐ ┌───────────────────────┐ │ │
│ │ │ ← Previous Post │ │ Next Post → │ │ │
│ │ │ Article Title │ │ Article Title │ │ │
│ │ └───────────────────┘ └───────────────────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ related │ │
│ │ Related Posts │ │
│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │
│ │ │ article │ │ article │ │ article │ │ │
│ │ └─────────┘ └─────────┘ └─────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘Usage
<BlogPost
title="The Future of Web Development"
excerpt="Exploring emerging trends and technologies shaping the web."
image={{ src: '/blog/future-web.jpg', alt: 'Future of Web' }}
author={{
name: 'Jane Doe',
avatar: '/avatars/jane.jpg',
role: 'Senior Developer',
bio: 'Building for the web since 2010.',
social: [{ platform: 'twitter', url: '...' }],
}}
date="2024-12-15"
category="Engineering"
tags={['React', 'TypeScript', 'Web Development']}
readingTime={8}
toc
share
>
{/* MDX content */}
</BlogPost>With Related Posts
<BlogPost
{...post}
related={relatedPosts}
prev={previousPost}
next={nextPost}
/>Layout Variants
<BlogPost layout="default" /> // Centered with sidebar TOC
<BlogPost layout="wide" /> // Wider content area
<BlogPost layout="full-width" /> // Full-width images