메뉴
Create and configure Fumadocs projects using CLI, selecting frameworks, content sources, and UI components
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Build and deploy Fumadocs documentation sites, supporting static export, PDF, RSS, and more
Build documentation sites using Headless components library, including navigation, TOC, search API, and content collections
Configure internationalization support for Fumadocs, including multi-language routing and content organization
Configure and manage Fumadocs MDX content collections, including schema definition, type generation, and file imports
Configure and integrate document search engines for Fumadocs, supporting Orama, Algolia, Mixedbread, and other solutions
Customize documentation appearance and layouts using Fumadocs UI theme and component library
| name | Fumadocs CLI |
| description | Create and configure Fumadocs projects using CLI, selecting frameworks, content sources, and UI components |
Fumadocs CLI is a command-line tool for creating and managing Fumadocs projects.
Supports npm, pnpm, yarn, bun:
npm create fumadocs-app
Add dependencies based on your chosen framework:
npm install fumadocs-ui fumadocs-mdx fumadocs-core
npm install fumadocs-nextjs-ui
npm install fumadocs-ui fumadocs-mdx fumadocs-core
npm install fumadocs-react-router-ui
npm install fumadocs-ui fumadocs-mdx fumadocs-core
npm install fumadocs-tanstack-start-ui
npm install fumadocs-ui fumadocs-mdx fumadocs-core
npm install fumadocs-waku-ui
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(),
}),
},
});
View documentation: https://www.fumadocs.dev/docs/integrations/content
npx @fumadocs/cli@latest customise
Install based on your needs:
npm install fumadocs-ui @fumadocs/base-ui
Radix UI (default): Full accessibility support
Base UI: Lightweight alternative
Configure in cli.json:
{
"uiLibrary": "base-ui"
}
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>
);
}
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
<DocsLayout
tree={source.getPageTree()}
sidebar={{
enabled: true,
tabs: true,
}}
>
{children}
</DocslocLayout>
Modify the docs route configuration in next.config.js or vite.config.ts.
Configure multiple content directories or use nested structure.
Enable to support static website deployment.
Reference Documentation: