Build excellent
documentation
your way.

the React.js docs framework you love.

Fumadocs is a React.js documentation framework for Developers, beautifully designed by Fuma Nama. Bringing powerful features for your docs workflows, with high customizability to fit your preferences, works seamlessly with any React.js framework, CMS — anything.

Try it out.

pnpm create fumadocs-app

localhost:3000

New App launched!

 Terminal
pnpm create fumadocs-app ◇ Project name│ my-app│◆ Choose a framework│ ● Next.js│ ○ Tanstack Start│ ○ React Router

A framework people love.

Loved by teams and developers from startups like Unkey, Vercel, Orama — evolving everyday to be your favourite docs framework.

Showcase

You know how you end up rebuilding a full docs site every time you start a new project? Fumadocs fixes this by giving you all the right blocks that you compose together. Like headless docs to build exactly what you need.

shadcn

Creator of Shadcn UI

Major shoutout to @fuma_nama for making fumadocs, a gorgeous documentation framework that composes beautifully into the App Router.

Anthony Shew

Turbo DX at Vercel

fumadocs is the best Next.js docs framework

Aiden Bai

Creator of Million.js

I'd have no shot building @arktypeio docs that looked half this good without it 😍

David Blass

Creator of Arktype

shadcn

Creator of Shadcn UI

Major shoutout to @fuma_nama for making fumadocs, a gorgeous documentation framework that composes beautifully into the App Router.

Anthony Shew

Turbo DX at Vercel

fumadocs is the best Next.js docs framework

Aiden Bai

Creator of Million.js

I'd have no shot building @arktypeio docs that looked half this good without it 😍

David Blass

Creator of Arktype

shadcn

Creator of Shadcn UI

Major shoutout to @fuma_nama for making fumadocs, a gorgeous documentation framework that composes beautifully into the App Router.

Anthony Shew

Turbo DX at Vercel

fumadocs is the best Next.js docs framework

Aiden Bai

Creator of Million.js

I'd have no shot building @arktypeio docs that looked half this good without it 😍

David Blass

Creator of Arktype

shadcn

Creator of Shadcn UI

Major shoutout to @fuma_nama for making fumadocs, a gorgeous documentation framework that composes beautifully into the App Router.

Anthony Shew

Turbo DX at Vercel

fumadocs is the best Next.js docs framework

Aiden Bai

Creator of Million.js

I'd have no shot building @arktypeio docs that looked half this good without it 😍

David Blass

Creator of Arktype

Minimal aesthetics, Maximum customizability.

Fumadocs offer well-designed themes, with a headless mode to plug your own UI.

Pro designer? Customise the theme using Fumadocs CLI.

pnpm dlx @fumadocs/cli customise

> Choose a layout to customise...

Anybody can write.

Native support for Markdown & MDX, offering intuitive, convenient and extensive syntax for non-dev writers, developers, and AI agents.

---
title: Hello World
---

## Overview

I love **Fumadocs**!

```ts tab="Tab 1"
console.log("Hello World")
```

```ts tab="Tab 2"
return 0;
```

The familiar syntax.

It is just Markdown, with additional features seamlessly composing into the syntax.

Markdown features, including images
Syntax highlighting (Powered by Shiki)
Codeblock Groups
Callouts
Cards
Custom Heading Anchors
Auto Table of Contents

---
title: Hello World
---

import { Playground } from "@/components/playground";

## Overview

<Playground title="Test" />

This codeblock shows TypeScript information!

```ts twoslash
console.log("Hello World");

// give your code decorations [!code ++]
const name = "fumadocs";
```

And re-use content:

<include>./another-page.mdx</include>

Extensive but simple.

MDX for developers authoring content, use JavaScript in content.

JavaScript + JSX syntax
Custom Components
Include/Embed Content
TypeScript Twoslash: show type information in codeblocks.
Shiki Notations
Extend via remark, rehype plugins

---
title: Hello World
---

import { db } from "@/lib/db";

export async function DataView() {
  const products = await db.select().from("products");
  return products.map(product => <div key={product.id}>{product.name}</div>)
}

<DataView />

<auto-type-table path='./my-file.ts' name='CardProps' />

Content, always up-to-date.

Combining the power of MDX and React Server Components, use the latest data from database, server — anywhere, to be part of your content.

Works on React Server Components
Display data from database, CMS, anything
auto-type-table for documenting types based on TypeScript Compiler
OpenAPI playground for documenting your APIs

Docs For Engineers.

Framework Agnostic

Official support for Next.js, Tanstack Start, React Router, Waku — portable to any React.js framework.

A truly composable framework.

Separated as Content → Core → UI, offering the high composability that engineers love — you can use Fumadocs as a library, without adapting the entire framework.

fumadocs-mdx

Use MDX in your React framework elegantly.

fumadocs-core

Headless library for building docs + handling content.

fumadocs-ui

UI library for building docs.

fumadocs-openapi

Extend Fumadocs to render OpenAPI docs.

fumadocs-obsidian

Extend Fumadocs to handle Obsidian-style Markdown.

Adopts your content.

Designed to integrate with any content source, Fumadocs works on MDX, Content Collections, and even your own CMS.

BaseHub CMS Sanity Payload CMS

Fumadocs MDX

import { loader } from 'fumadocs-core/source';
import { docs } from '@/.source';

export const source = loader({
  source: docs.toFumadocsSource(),
  baseUrl: '/docs',
});