Manual Installation
Create a new fumadocs project from scratch.
Read the Quick Start guide first for basic concept.
Getting Started
Create a new Next.js application with create-next-app, and install required packages.
fumadocs-ui fumadocs-coreContent Source
Fumadocs supports different content sources, you can choose one you prefer.
There is a list of officially supported sources:
Make sure to configure the library correctly following their setup guide before continuing, we will import the source adapter using @/lib/source.ts in this guide.
Root Layout
Wrap the entire application inside Root Provider, and add required styles to body.
import { RootProvider } from 'fumadocs-ui/provider';
import type { ReactNode } from 'react';
export default function Layout({ children }: { children: ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<body
// you can use Tailwind CSS too
style={{
display: 'flex',
flexDirection: 'column',
minHeight: '100vh',
}}
>
<RootProvider>{children}</RootProvider>
</body>
</html>
);
}Styles
Setup Tailwind CSS v4 on your Next.js app, add the following to global.css.
@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
/* path of `fumadocs-ui` relative to the CSS file */
@source '../node_modules/fumadocs-ui/dist/**/*.js';It doesn't come with a default font, you may choose one from next/font.
Layout
Create a app/layout.config.tsx file to put the shared options for our layouts.
{
"file": "../../examples/next-mdx/app/layout.config.tsx",
"codeblock": {
"meta": "title=\"app/layout.config.tsx\""
}
}Create a folder /app/docs for our docs, and give it a proper layout.
{
"file": "../../examples/next-mdx/app/docs/layout.tsx",
"codeblock": {
"meta": "title=\"app/docs/layout.tsx\""
}
}pageTree refers to Page Tree, it should be provided by your content source.
Page
Create a catch-all route /app/docs/[[...slug]] for docs pages.
In the page, wrap your content in the Page component.
It may vary depending on your content source. You should configure static rendering with generateStaticParams and metadata with generateMetadata.
{
"file": "../../examples/next-mdx/app/docs/[[...slug]]/page.tsx",
"codeblock": {
"meta": "title=\"app/docs/[[...slug]]/page.tsx\" tab=\"Fumadocs MDX\""
}
}{
"file": "../../examples/content-collections/app/docs/[[...slug]]/page.tsx",
"codeblock": {
"meta": "title=\"app/docs/[[...slug]]/page.tsx\" tab=\"Content Collections\""
}
}Search
Use the default document search based on Orama.
{
"file": "../../examples/next-mdx/app/api/search/route.ts",
"codeblock": {
"meta": "title=\"app/api/search/route.ts\" tab=\"Fumadocs MDX\""
}
}{
"file": "../../examples/content-collections/app/api/search/route.ts",
"codeblock": {
"meta": "title=\"app/api/search/route.ts\" tab=\"Content Collections\""
}
}Learn more about Document Search.
Done
You can start the dev server and create MDX files.
---
title: Hello World
---
## Introduction
I love Anime.Customise
You can use Home Layout for other pages of the site, it includes a navbar with theme toggle.
Deploying
It should work out-of-the-box with Vercel & Netlify.
Docker Deployment
If you want to deploy your Fumadocs app using Docker with Fumadocs MDX configured, make sure to add the source.config.ts file to the WORKDIR in the Dockerfile.
The following snippet is taken from the official Next.js Dockerfile Example:
WORKDIR /app
# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* source.config.ts ./This ensures Fumadocs MDX can access your configuration file during builds.
More Posts
Newsletter
Join the community
Subscribe to our newsletter for the latest news and updates