Fumadocs: Build Excellent Documentation, Your Style
Fumadocs is a powerful, highly customizable React.js documentation framework for developers. Build beautiful, engaging docs with ease and flexibility.
The React.js Documentation Framework You'll Love.
Build Excellent Documentations, Your Style.
Fumadocs is a cutting-edge React.js documentation framework designed specifically for developers by Fuma Nama. It brings powerful features to your documentation workflows, offering high customizability to fit your unique preferences. Seamlessly integrate it with any React.js framework, CMS, or other tools.
Ready to get started?
pnpm create fumadocs-app
localhost:3000
New App launched!
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, and Orama, Fumadocs is continuously evolving to be your favorite documentation framework. Check out our Showcase for examples.
"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."
"Major shoutout to @fuma_nama for making fumadocs, a gorgeous documentation framework that composes beautifully into the App Router."
"fumadocs is the best Next.js docs framework"
"I'd have no shot building @arktypeio docs that looked half this good without it 😍"
Explore Fumadocs Capabilities
Docs
Notebook
OpenAPI
Minimal Aesthetics, Maximum Customizability.
Fumadocs offers beautifully designed themes, alongside a powerful headless mode to integrate your own UI components. Are you a pro designer? Customize the theme effortlessly using the Fumadocs CLI.
pnpm dlx @fumadocs/cli customise
> Choose a layout to customise...
Anybody Can Write.
With native support for Markdown and MDX, Fumadocs provides an intuitive, convenient, and extensive syntax for non-developer writers, experienced developers, and even AI agents.
The Familiar Syntax.
It's just Markdown, with additional features seamlessly integrated 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
---
## Overview
I love **Fumadocs**!
```ts tab="Tab 1"
console.log("Hello World")
return 0;
#### Extensive but Simple.
Leverage MDX for developers to author rich content, embedding JavaScript directly within your documentation:
* JavaScript + JSX syntax
* Custom Components
* Include/Embed Content
* TypeScript Twoslash: show type information directly in codeblocks.
* Shiki Notations
* Extend via remark, rehype plugins
```md
---
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>
Content, Always Up-to-Date.
Combine the power of MDX and React Server Components to use the latest data from your database, server, or any source directly within your content.
- Works with React Server Components
- Display data from databases, CMS, or any API
auto-type-tablefor documenting types based on TypeScript Compiler- OpenAPI playground for documenting your APIs
---
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' />
Docs For Engineers.
Framework Agnostic
Fumadocs offers official support for Next.js, Tanstack Start, React Router, and Waku, making it portable to virtually any React.js framework.
- Next.js
- React Router
A Truly Composable Framework.
Separated into Content → Core → UI, Fumadocs provides the high composability that engineers value. Use Fumadocs as a library without adopting 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 seamlessly with MDX, Content Collections, and even your own custom CMS.
- BaseHub CMS
- Sanity
- Payload CMS
- Fumadocs MDX
import { loader } from 'fumadocs-core/source';
import { docs } from 'fumadocs-mdx:collections/server';
export const source = loader({
source: docs.toFumadocsSource(),
baseUrl: '/docs',
});
My CMS
- My Page
- Article
- Another Page
- Article
- Components
- Article
- Getting Started
- Article
- MDX Editor
---
title: Hello World
---
# Hello World!
This is my first document.
Enhance Your Search Experience.
Easily integrate with Orama Search and Algolia Search directly into your documentation.
Search...
- Getting Started Use Fumadocs in your project.
- Components The UI Components for your docs.
- MDX Content Using MDX for content.
- User Guide How to use Fumadocs.
The shadcn/ui for Docs
Fumadocs CLI empowers you to create interactive components for your documentation, offering a rich and engaging experience for your users.
A Framework of Dream. Made Possible by You.
Fumadocs is 100% powered by passion and its vibrant open-source community.
Sponsors
Contributors
- 28 Some of our best contributors.
Build Your Docs
Light and Gorgeous, Just Like the Moon.
- Battery guaranteed. Actively maintained, open for contributions.
- Fully open-source. Available on GitHub.
- Within seconds. Initialize a new project instantly with CLI.