Using shadcn/ui Components in MDX

One of the great benefits of using MDX for your blog posts is the ability to include React components directly in your markdown. With our setup, you can use shadcn/ui components right in your blog posts!

Basic Usage

The standard markdown syntax works as expected:

Bold text and italic text
Links to other sites
Lists, like the one you're reading now

Tables with shadcn/ui

Tables are automatically styled using shadcn/ui's Table component:

Name	Role	Department
John Doe	Developer	Engineering
Jane Smith	Designer	Design
Bob Johnson	Manager	Administration

Using Alert Components

You can use the Alert component directly in your MDX:

This is an important message for your readers!

Cards for Highlighted Content

Use Card components to highlight important information:

This content is displayed in a shadcn/ui Card component, making it stand out from the rest of your blog post.

Badges for Categories or Tags

You can use Badge components inline:

This post is about shadcn/ui and MDX.

Code Blocks

Code blocks are styled with proper syntax highlighting:

1function Welcome() {
2  return <h1>Hello, world!</h1>;
3}

You can also show function components with props:

1function Greeting({ name }) {
2  return <h1>Hello, {name}!</h1>;
3}

Benefits of Using shadcn/ui in MDX

Consistent Design: Your blog posts match the rest of your website
Interactive Components: Add interactive elements to your content
Customizable: Easily customize the appearance of your components
Accessibility: shadcn/ui components are built with accessibility in mind

Try adding some shadcn/ui components to your next blog post!