Welcome to your sample documentation page! This document demonstrates basic features and components you can use with Fumadocs.

Table of Contents

• Getting Started
• Example Code Block
• Useful Links
• Further Steps
• Formatting Text
• Working with Lists
• Adding Images
• Reusable Components
• Advanced Code Samples
• Frequently Asked Questions
• Changelog
• Appendix: More Resources

Getting Started

Begin by editing the content in your .mdx files. You can add headings, code blocks, components, and more.

You might want to create a structure similar to the following:

content/
  docs/
    getting-started.mdx
    advanced-topics.mdx
    ...

Organize your docs for clarity and ease of navigation!

Example Code Block

// Simple JavaScript example
function greet(name) {
  console.log(`Hello, ${name}!`);
}
greet('Fumadocs');

You can also highlight other languages:

# Python example
def greet(name):
    print(f"Hello, {name}!")

greet("Fumadocs")

# Bash example
echo "Hello from Bash!"

Useful Links

Further Steps

• Try adding your own sections
• Include images or code samples
• Explore available Fumadocs components
• Link to related documents
• Experiment with custom components using React in .mdx!

Formatting Text

You can easily format text using Markdown and MDX:

Bold, Italic, Inline code, Strikethrough

This is a blockquote for important information.

Headings

Use headings to organize your documentation into sections and subsections.

Example Heading 4

You can go as deep as you want!

Alert Components

Note: You can create custom alerts using blockquotes or create your own React components.

Working with Lists

You can create:

• Unordered lists
  • With nested items
  • Like this one
• Tasks with checkboxes
• Completed tasks

Or ordered lists:

1. Step one
2. Step two
3. Step three

Reusable Components

You can define and use custom React components directly in .mdx files.

// Example Counter component
import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Current count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
    </div>
  );
}

You can also create more complex components to demonstrate your examples.

Advanced Code Samples

Here is an example of a more advanced code block with syntax highlighting and multiple languages:

type User = {
  id: number;
  name: string;
};

function findUserById(users: User[], id: number): User | undefined {
  return users.find(user => user.id === id);
}

{
  "title": "Sample JSON",
  "description": "This is a JSON code snippet.",
  "items": [1, 2, 3, 4]
}

Frequently Asked Questions

How do I customize the documentation layout?

Edit the components located in the /components/layout/docs/ directory to change the appearance and structure of your docs.

Can I use custom React components in MDX?

Absolutely! Import or define them directly at the top of your .mdx file or in your project’s component library.

Is there support for tables?

Yes! Here's a table example:

Changelog

v2.0.0

• Major overhaul to the docs structure
• Added advanced code blocks and live demos
• Improved navigation and sidebar features

v1.1.0

• Added support for custom components in MDX
• Improved integration with Next.js

v1.0.0

• Initial release of documentation

Appendix: More Resources

• MDX Guides
• Next.js Routing
• React Hooks
• Tailwind CSS
• TypeScript Documentation

Enjoy documenting with Fumadocs! If you have suggestions for improving this template, feel free to contribute or open an issue on GitHub.

Happy writing!