Create a new fumadocs project from sketch.
Create a new Next.js application with create-next-app
, and install required packages.
npm pnpm yarn bun
npm install fumadocs-ui fumadocs-core
You can choose a content source you prefer.
There is a list of supported sources:
You have to configure the library correctly following their setup guide before continuing.
Wrap the entire application inside Root Provider .
import { RootProvider } from 'fumadocs-ui/provider' ;
import type { ReactNode } from 'react' ;
export default function Layout ({ children } : { children : ReactNode }) {
return (
< html lang = "en" >
< body >
< RootProvider > { children } </ RootProvider >
</ body >
</ html >
) ;
}
Vanilla Tailwind CSS
Import the pre-built stylesheet in the root layout.
import 'fumadocs-ui/style.css' ;
It doesn't come with a default font, you may choose one from next/font
.
Create a app/layout.config.tsx
file to put the shared options for our layouts.
import { HomeLayoutProps } from 'fumadocs-ui/home-layout' ;
export const baseOptions : HomeLayoutProps = {
nav : {
title : 'My App' ,
},
};
Create a folder /app/docs
for our docs, and give it a proper layout.
import { source } from '../source' ;
import { DocsLayout } from 'fumadocs-ui/layout' ;
import type { ReactNode } from 'react' ;
import { baseOptions } from '@/app/layout.config' ;
export default function Layout ({ children } : { children : ReactNode }) {
return (
< DocsLayout tree = { source . pageTree } { ... baseOptions } >
{ children }
</ DocsLayout >
) ;
}
pageTree
refers to Page Tree, it should be provided by your content source.
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
.
Fumadocs MDX Content Collections
app/docs/[[...slug]]/page.tsx import { source } from '@/app/source' ;
import type { Metadata } from 'next' ;
import {
DocsPage ,
DocsBody ,
DocsTitle ,
DocsDescription ,
} from 'fumadocs-ui/page' ;
import { notFound } from 'next/navigation' ;
import defaultMdxComponents from 'fumadocs-ui/mdx' ;
export default async function Page ({
params ,
} : {
params : { slug ?: string [] };
}) {
const page = source . getPage (params . slug) ;
if ( ! page) notFound () ;
const MDX = page . data . body ;
return (
< DocsPage toc = { page . data . toc } full = { page . data . full } >
< DocsTitle > { page . data . title } </ DocsTitle >
< DocsDescription > { page . data . description } </ DocsDescription >
< DocsBody >
< MDX components = {{ ... defaultMdxComponents }} />
</ DocsBody >
</ DocsPage >
) ;
}
export async function generateStaticParams () {
return source . generateParams () ;
}
export function generateMetadata ({ params } : { params : { slug ?: string [] } }) {
const page = source . getPage (params . slug) ;
if ( ! page) notFound () ;
return {
title : page . data . title ,
} satisfies Metadata ;
}
Use the default document search based on Flexsearch.
Fumadocs MDX Content Collections
import { source } from '@/app/source' ;
import { createSearchAPI } from 'fumadocs-core/search/server' ;
export const { GET } = createSearchAPI ( 'advanced' , {
indexes : source . getPages () . map ( ( page ) => ( {
title : page . data . title ,
description : page . data . description ,
structuredData : page . data . structuredData ,
id : page . url ,
url : page . url ,
} )) ,
} ) ;
Learn more about Document Search .
You can start the dev server and start writing content.