User Guide

Installation

Initialize a config for CLI:

npx @fumadocs/cli

You can change the output paths of components in the config.

Init

Set up Fumadocs on an existing app, it supports Next.js, React Router, Tanstack Start and Waku.

npx @fumadocs/cli init

To avoid conflicts with your app, the docs pages are added in a dedicated route group (e.g. app/(docs) on Next.js) with their own provider and layout, route handlers like the search API follow the examples. Only a few edits are made to existing files:

Fumadocs MDX plugin in your framework config.
Fumadocs UI styles in your global CSS.
suppressHydrationWarning on the <html> element of your root layout, for the theme switch.
.source in .gitignore.

Pass --i18n to set up internationalization: the docs routes get a locale segment (optional for the default locale where the router supports it), a lib/i18n.ts config and, on Next.js, a proxy scoped to the docs routes. Other features follow the i18n config of your project.

It asks before overwriting a file, pass --yes to skip prompts and --no-install to only write dependencies to package.json.

Features

Configure a feature on your project, it installs the needed components & routes, and wires them into your app.

npx @fumadocs/cli feature ai --provider openrouter

Feature	Description
`docs`	Set up Fumadocs, same as `init`.
`ai`	Ask AI dialog, `--provider`.
`llms`	LLM routes: `llms.txt`, `llms-full.txt` and per-page Markdown.
`mcp`	MCP server to search and read the docs.
`webmcp`	WebMCP tools for AI agents in the browser, experimental.
`og`	Open Graph image generation, `--engine`.
`search`	3rd party search solution, `--provider`.
`feedback`	Feedback component on docs pages.
`epub`	Route to export EPUB.
`lint`	Configure ESLint (Next.js only), Biome or Oxlint, `--linter`.

Features adapt to your setup:

Fumadocs MDX with the Macro API or a source.config.ts, other content sources can't use llms, mcp and epub.
The baseUrl of your docs, src/ directory, next.config.ts, i18n, static export and SPA modes.
React Router with file-based routes: the routes to register are printed instead.

The paths of routes are placed under the constants of lib/shared.ts.

See help for the available options:

npx @fumadocs/cli feature -h

Components

Select and install components.

npx @fumadocs/cli add

You can pass component names directly.

npx @fumadocs/cli add banner files

How the magic works?

The CLI fetches the latest version of component from the GitHub repository of Fumadocs. When you install a component, it is guaranteed to be up-to-date.

In addition, it also transforms import paths. Make sure to use the latest version of CLI

This is highly inspired by Shadcn UI.

Customize

A simple way to customize Fumadocs layouts.

npx @fumadocs/cli customize

It installs the layout into layouts and points the imports of your route files at it.

Shadcn UI

On projects with a components.json, the CLI follows the aliases of Shadcn UI and:

installs the shadcn preset, so Fumadocs UI adopts your theme colors.
reuses the button, popover and collapsible in your ui directory, they share the API of Shadcn UI.
imports cn from your utils alias.

Fumadocs' copies are only installed when you don't have them yet.

Tree

Generate files tree for Fumadocs UI Files component, using the tree command from your terminal.

npx @fumadocs/cli tree ./my-dir ./output.tsx

You can output MDX files too:

npx @fumadocs/cli tree ./my-dir ./output.mdx

See help for further details:

npx @fumadocs/cli tree -h

Example Output

output.tsx

import { File, Folder, Files } from 'fumadocs-ui/components/files';

export default (
  <Files>
    <Folder name="app">
      <File name="layout.tsx" />
      <File name="page.tsx" />
      <File name="global.css" />
    </Folder>
    <Folder name="components">
      <File name="button.tsx" />
      <File name="tabs.tsx" />
      <File name="dialog.tsx" />
    </Folder>
    <File name="package.json" />
  </Files>
);

On this page