projects content

🔥 Introduction

Welcome to the Fumadocs MDX playground.
This page demonstrates how you can combine headings, paragraphs, lists, code blocks, tables, and a file-tree style overview to build rich documentation using Fumadocs and MDX.

Fumadocs is designed to make:

• Authoring: Fast, ergonomic MDX-based docs.
• Navigation: Clean, file-system–driven routing.
• Customization: Easy theming and component overrides.

If you’re just starting out, read through this file and copy‑paste sections into your own docs as needed.

Getting Started with Fumadocs + Next.js

In a typical setup, Fumadocs sits on top of a Next.js application and reads your docs from a content directory.

1. Install dependencies

pnpm add fumadocs-ui fumadocs-core
# or
npm install fumadocs-ui fumadocs-core
# or
yarn add fumadocs-ui fumadocs-core

2. Basic Next.js configuration

In your next.config.mjs, you’ll usually enable the MDX / Fumadocs integration.
This is just an example; adjust it to your actual setup.

// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    mdxRs: true,
  },
};

export default nextConfig;

Project Structure (File Tree)

Here is an example file tree you might see in a Fumadocs project:

.
├─ app/
│  ├─ layout.tsx
│  ├─ page.tsx
│  └─ docs/
│     ├─ layout.tsx
│     └─ [slug]/
│        └─ page.tsx
├─ content/
│  └─ docs/
│     ├─ index.mdx
│     ├─ getting-started.mdx
│     └─ test.mdx   # ← this page
├─ public/
│  └─ favicon.ico
├─ next.config.mjs
├─ package.json
└─ tsconfig.json

You don’t have to match this layout exactly, but using a clear and consistent structure makes your docs easier to navigate.

Writing Content in MDX

MDX lets you mix Markdown with React components.
With Fumadocs, you can write simple text-only pages or rich interactive docs.

Headings & paragraphs

Use Markdown syntax for headings and text:

## My Heading

This is a paragraph explaining something important.
You can add **bold** text, _italic_ text, and `inline code`.

Rendered, it looks like this:

My Heading

This is a paragraph explaining something important. You can add bold text, italic text, and inline code.

Code Blocks

Fumadocs applies pretty code highlighting via MDX code fences.
Specify the language after the opening backticks.

TypeScript example

type GreetingProps = {
  name: string;
};

export const Greeting = ({ name }: GreetingProps) => {
  return <div>Hello {name}!</div>;
};

JavaScript example

export function sum(a, b) {
  return a + b;
}

console.log(sum(2, 3)); // 5

Configuration snippet

{
  "name": "fuma-docs-example",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "latest",
    "react": "latest",
    "react-dom": "latest",
    "fumadocs-ui": "latest"
  }
}

Information Table (Feature Overview)

The table below summarizes some common Fumadocs documentation patterns:

You can extend this table with your own project-specific rows (e.g. “API Reference”, “Design System”, “CLI Commands”).

Content Patterns & Best Practices

When writing documentation:

• Start with context: Explain the “why” before the “how”.
• Keep sections focused: One main idea per heading.
• Add runnable snippets where possible (copy‑paste‑ready).
• Link forward: At the end of a section, point to the next logical topic.

Example section layout

## Concept

Explain what the concept is and why it matters.

## Basic Usage

Show a minimal, working example.

## Advanced Notes

Cover edge cases, configuration options, and gotchas.

## Next Steps

Link to related guides or reference pages.

Example: Small Guide Section

Below is a mini‑guide written entirely in MDX, which you can adapt for your own features:

Step 1 – Install the package

npm install my-library

Step 2 – Import and use in your component

import { AwesomeComponent } from 'my-library';

export default function Page() {
  return <AwesomeComponent variant="primary" />;
}

Step 3 – Document it

Describe how this feature behaves, any props it accepts, and potential pitfalls. Keep the explanation close to the code so readers don’t have to scroll far.

Cards (Related Resources)

Use Cards to direct users to the most relevant next steps.

Summary

On this page you saw:

• Headings and paragraphs for structured narrative.
• Multiple code blocks for TypeScript, JavaScript, JSON, and shell commands.
• A file-tree style overview of a typical docs project.
• An information table highlighting common documentation features.
• A Cards section to surface related links.

Feel free to use this file as a template when building new pages in your Fumadocs documentation.