Sample
Configuration
Learn how to configure your documentation site
Configuration
Customize your documentation site to fit your needs.
Basic Configuration
The main configuration file is source.config.ts:
import { defineConfig, defineDocs } from 'fumadocs-mdx/config';
export const docs = defineDocs({
dir: 'content/docs',
docs: {
schema: frontmatterSchema,
},
meta: {
schema: metaSchema,
},
});
export default defineConfig({
mdxOptions: {
// MDX options here
},
});Frontmatter Options
Each MDX file supports the following frontmatter fields:
| Field | Type | Description |
|---|---|---|
title | string | Page title (required) |
description | string | Page description |
icon | string | Icon name from lucide-react |
full | boolean | Enable full-width layout |
Example
---
title: My Page
description: This is my page description
icon: Rocket
full: false
---Theme Configuration
Configure the layout in your app/docs/layout.tsx:
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
export default function Layout({ children }) {
return (
<DocsLayout
tree={pageTree}
nav={{
title: 'My Docs',
}}
>
{children}
</DocsLayout>
);
}Import color presets in app/global.css:
@import 'fumadocs-ui/css/purple.css';
/* or */
@import 'fumadocs-ui/css/blue.css';
/* or */
@import 'fumadocs-ui/css/green.css';Customize fonts in app/layout.tsx:
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
export default function Layout({ children }) {
return (
<html className={inter.className}>
<body>{children}</body>
</html>
);
}Advanced Options
Advanced options may affect performance. Use with caution.
Custom MDX Components
Register custom components in mdx-components.tsx:
import defaultComponents from 'fumadocs-ui/mdx';
import { MyCustomComponent } from './components';
export function getMDXComponents(components) {
return {
...defaultComponents,
MyCustomComponent,
...components,
};
}Search Configuration
Enable search in your docs:
import { source } from '@/lib/source';
export const searchIndex = source.search({
// Search options
tag: 'docs',
});The search functionality is powered by Flexsearch for fast, client-side searching.
Environment Variables
Create a .env.local file for environment-specific settings:
# Site URL
NEXT_PUBLIC_SITE_URL=https://yourdomain.com
# Analytics (optional)
NEXT_PUBLIC_ANALYTICS_ID=your-analytics-id