Back to components
Content component

MDX Blog

File-based blog with MDX, syntax highlighting, and full SEO.

Read full guideBrowse all components

Install

$ Run in your project root
pnpm dlx shadcn@latest add https://ui-components.desishub.com/r/mdx-blog.json

What it does

  • /blog listing + /blog/[slug] detail pages with prev/next nav
  • MDX content rendering with rehype-pretty-code syntax highlighting
  • Copy-to-clipboard on all code blocks
  • Auto-generated SEO metadata (OpenGraph, Twitter, JSON-LD) per post
  • 3 sample blog posts as reference material

When to use

Use it

Developer portfolios, product blogs, docs sites with code examples, teaching platforms.

Skip it

Projects needing comments, user-generated content, auth-gated content, or a CMS dashboard.

Prerequisites

  • Next.js with Tailwind CSS

Files & routes added

  • /blog, /blog/[slug]
  • components/mdx.tsx, copy-button.tsx, post-item.tsx
  • data/blog.ts, types/blog.ts
  • content/blog/ — 3 sample .mdx files