Welcome to the complete MDX template guide! This document showcases every available component and styling option in the theme.

This is bold text and this is italic text. You can also use strikethrough text.

Here's a paragraph with highlighted text to emphasize important content.

• First item with some content
• Second item with bold text
• Third item with italic text

  • Nested item one
  • Nested item two

1. First numbered item
2. Second numbered item with inline code
3. Third numbered item

   1. Nested numbered item
   2. Another nested item

This is a beautiful blockquote that stands out from the regular text. It can contain bold text, italic text, and even inline code.

Multiple paragraphs are supported within blockquotes for longer quotes or excerpts.

Use inline code for variable names, function names, or short code snippets within sentences like useState, componentDidMount, or console.log().

Here's a TypeScript example with advanced features (line number, title, caption, and highlighting):

function DisplayBox({ children }: { children: React.ReactNode }) {
  return (
    <div className="my-4 rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-6 dark:border-gray-600 dark:bg-gray-800/50">
      {children}
    </div>
  );
}

• About Page
• Contact Page

• Next.js Documentation
• MDX Documentation

Here's an inline equation: $E = mc^2$ demonstrating mass-energy equivalence.

Here are some common math expressions: $x^2$, $\sqrt{16}$, $\frac{a}{b}$, $\sum_{i=1}^{n}$

Here's a complex mathematical expression:

Here's an example using a statically imported image with automatic optimization:

You can also use external images by providing a URL:

Images stored in the public folder can be referenced directly: