MDX Component Showcase

A comprehensive demo of all available MDX components and styling options

2 min read

demo, mdx, components

MDX Component Showcase

This post demonstrates all the available components and styling options in the afterthoughts section.

Typography

Headings

You can use headings from H1 to H6. The H1 is usually reserved for the post title.

Emphasis and Styling

You can make text bold, italic, or both. You can also add inline code snippets.

Lists

Unordered Lists

Ordered Lists

  1. First step
  2. Second step
  3. Third step

Links

You can add external links or internal links to other posts.

Callouts

This is an info callout. Use it to highlight important information!

Success! This callout is perfect for positive messages and achievements.

Warning! Use this to alert readers about potential issues or things to watch out for.

Error! This callout is for critical information or things that went wrong.

This is the default callout style for general notes and asides.

Quotes

The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle.

Steve Jobs

Code Blocks

With Syntax Highlighting

example.tsx
tsx
1
import React from 'react';
2


3
export default function Component() {
4
const [count, setCount] = React.useState(0);
5


6
return (
7
  <div>
8
    <h1>Count: {count}</h1>
9
    <button onClick={() => setCount(count + 1)}>
10
      Increment
11
    </button>
12
  </div>
13
);
14
}

Standard Code Blocks

console.log("This is a standard code block");
const greeting = "Hello, world!";

Images

Demo image description
This is a beautiful image with a caption below it

Image carousel

Video Embeds

Horizontal Rules

Use horizontal rules to separate sections:

Tables

| Feature | Supported | Notes | |---------|-----------|-------| | Typography | ✅ | Full markdown support | | Code Blocks | ✅ | With syntax highlighting | | Images | ✅ | With captions | | Videos | ✅ | YouTube and Vimeo |

Conclusion

This showcase demonstrates all the components available for creating rich, engaging afterthoughts posts. Mix and match these elements to create compelling content!