Settings
Learn how to configure your documentation site
Configuration
Fumadocs uses source.config.ts for content source configuration and Next.js layout files for UI configuration.
Source Configuration
The source.config.ts file defines where your documentation content lives:
import { defineDocs } from "fumadocs-mdx/config";
export const docs = defineDocs({
dir: "content/docs",
});Navigation
Navigation is configured using meta.json files in each content directory:
{
"title": "Documentation",
"pages": ["index", "about", "...platform"]
}Theme & Colors
Customize the theme in your global.css:
@import "tailwindcss";
@import "fumadocs-ui/css/neutral.css";
@import "fumadocs-ui/css/preset.css";Available color presets:
fumadocs-ui/css/neutral.css— Neutral themefumadocs-ui/css/ocean.css— Ocean blue themefumadocs-ui/css/purple.css— Purple theme
Layout Configuration
Configure the docs layout in src/app/docs/layout.tsx:
import { DocsLayout } from "fumadocs-ui/layouts/docs";
export default function Layout({ children }) {
return (
<DocsLayout
tree={source.pageTree}
nav={{
title: "Your Project",
url: "/docs",
}}
links={[
{ text: "Website", url: "https://example.com" },
]}
>
{children}
</DocsLayout>
);
}Search
Fumadocs includes built-in search. Configure the search API route in src/app/api/search/route.ts:
import { source } from "@/lib/source";
import { createFromSource } from "fumadocs-core/search/server";
export const { GET } = createFromSource(source);For more details, visit the Fumadocs documentation.