xiaoy233 Fumadocs CLI Usage Guide
Fumadocs CLI is a command-line tool for creating and managing Fumadocs projects.
Project Creation
Automatic Installation
Supports npm, pnpm, yarn, bun:
npm create fumadocs-app
Manual Installation
Add dependencies based on your chosen framework:
Next.js
npm install fumadocs-ui fumadocs-mdx fumadocs-core
npm install fumadocs-nextjs-ui
React Router
npm install fumadocs-ui fumadocs-mdx fumadocs-core
npm install fumadocs-react-router-ui
Tanstack Start
npm install fumadocs-ui fumadocs-mdx fumadocs-core
npm install fumadocs-tanstack-start-ui
Waku
npm install fumadocs-ui fumadocs-mdx fumadocs-core
npm install fumadocs-waku-ui
Content Source Configuration
Fumadocs MDX
Create fumadocs-mdx.config.ts or source.config.ts:
import { defineDocs } from 'fumadocs-mdx/config';
import { z } from 'zod';
export const docs = defineDocs({
dir: 'content/docs',
docs: {
schema: pageSchema.extend({
index: z.boolean().default(false),
tags: z.array(z.string()).default([]),
}),
},
meta: {
schema: metaSchema.extend({
title: z.string(),
description: z.string(),
}),
},
});
Custom Content Sources
View documentation: https://www.fumadocs.dev/docs/integrations/content
UI Component Installation
Via CLI
npx @fumadocs/cli@latest customise
Manual Installation
Install based on your needs:
npm install fumadocs-ui @fumadocs/base-ui
Choosing UI Library
Radix UI (default): Full accessibility support
Base UI: Lightweight alternative
Configure in cli.json:
{
"uiLibrary": "base-ui"
}
Layout Customization
Layout Options
- Docs Layout: Standard documentation layout (sidebar + header + TOC)
- Flux Layout: Minimalist layout, suitable for tech blogs
- Home Layout: Homepage layout, ideal as a website entry point
- Notebook Layout: Notebook-style layout, compact for technical documentation
Custom Layouts
In layout.tsx:
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import { source } from '@/lib/source';
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<DocsLayout tree={source.getPageTree()}>
{children}
</DocsLayout>
);
}
Configuring Sidebar
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
<DocsLayout
tree={source.getPageTree()}
sidebar={{
enabled: true,
tabs: true,
}}
>
{children}
</DocslocLayout>
Common Questions
How to change base route
Modify the docs route configuration in next.config.js or vite.config.ts.
How to implement multi-docs
Configure multiple content directories or use nested structure.
Static Export
Enable to support static website deployment.
Reference Documentation: