MDX Styles Guide

This page demonstrates all the different MDX styles and components available in fumadocs.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Text Styles

This is bold text, this is italic text, and this is bold italic text.

You can also use inline code within paragraphs.

Here's some ~~strikethrough text~~.

Lists

Unordered Lists

First item
Second item
- Nested item
- Another nested item
Third item

Ordered Lists

First numbered item
Second numbered item
1. Nested numbered item
2. Another nested item
Third numbered item

Links

Here's a link to fumadocs and an internal link.

Note: To add images, place them in the public folder and use the standard markdown syntax: ![Alt text](/image.png).

Code Blocks

JavaScript

function greet(name) {
  console.log(`Hello, ${name}!`);
  return `Welcome to fumadocs`;
}

greet('Developer');

TypeScript

interface User {
  id: number;
  name: string;
  email: string;
}

const user: User = {
  id: 1,
  name: 'John Doe',
  email: 'john@example.com',
};

Python

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

print(fibonacci(10))

JSON

{
  "name": "fumadocs",
  "version": "1.0.0",
  "features": [
    "MDX support",
    "TypeScript",
    "Next.js"
  ]
}

Bash

npm install fumadocs-ui
npm run dev

Cards

Next.js Documentation

Fumadocs Documentation

React Documentation

Callouts

This is an info callout. Use it to provide helpful information to users.

This is a warning callout. Use it to alert users about potential issues.

This is an error callout. Use it to highlight errors or critical information.

This is a check callout. Use it to indicate success or completion.

Tabs

function App() {
  return <h1>Hello React!</h1>;
}

<template>
  <h1>Hello Vue!</h1>
</template>

<h1>Hello Svelte!</h1>

Steps

Install dependencies

npm install

Configure your project

npm run setup

Start development server

npm run dev

Blockquotes

This is a blockquote. You can use it to highlight important quotes or information.

It can span multiple lines and supports markdown formatting.

Tables

Feature	Status	Description
MDX Support	✅	Full MDX support with React components
TypeScript	✅	Built with TypeScript
Dark Mode	✅	Automatic dark mode support
Search	✅	Built-in search functionality

Horizontal Rule

HTML Elements

You can also use raw HTML elements:

This is a custom styled div with inline styles.

You can use any HTML element in MDX!

Details/Summary (Collapsible)

Click to expand - Hidden Content

This content is hidden by default and can be expanded by clicking the summary.

You can include any markdown content here:

Lists
Bold text
Code blocks
And more!

Math Expressions (if configured)

If you have math support enabled (e.g., with remark-math and rehype-katex), you can use math expressions. However, math support needs to be configured separately in your MDX setup.

Mixed Content Example

Here's an example combining multiple styles:

Pro Tip: Use a combination of components to create rich documentation.

Follow these steps to get started:

Create a new MDX file in content/docs

Add frontmatter with title and description

---
title: My Page
description: Page description
---

Write your content using MDX components

Card 1

Card 2

You can nest components within tabs!

Conclusion

This guide demonstrates the various MDX styles and components available in fumadocs. Mix and match these elements to create rich, interactive documentation!