Fumadocs
Layouts

Page

A page in your documentation

Page is the base element of a documentation, it includes Table of contents, Footer, and Breadcrumb.

Usage

page.tsx
import {
  DocsPage,
  DocsDescription,
  DocsTitle,
  DocsBody,
} from 'fumadocs-ui/page';
 
<DocsPage>
  <DocsTitle>title</DocsTitle>
  <DocsDescription>description</DocsDescription>
  <DocsBody>...</DocsBody>
</DocsPage>;

Good to know

Instead of rendering the title with DocsTitle or your custom component in page.tsx, you can put the title into MDX file. This will render the title in the MDX body.

Page

The main layout of docs pages.

Title

Optional, display the page title.

Description

Optional, display the page description.

Body

It applies the Typography styles, wrap your content inside.

You can use this component without <DocsPage />.

import { DocsBody } from 'fumadocs-ui/page';
 
<DocsBody>
  <h1>This heading looks good!</h1>
</DocsBody>;

Category

Optional, display the other pages in its folder in page tree.

You can use this component without <DocsPage />.

page.tsx
import { source } from '@/lib/source';
import { DocsCategory } from 'fumadocs-ui/page';
 
const page = source.getPage(['...']);
 
<DocsCategory page={page} from={source} />;

By default, it takes the locale property from page to find the corresponding page tree to traverse. You can also specify it.

page.tsx (i18n enabled)
import { source } from '@/lib/source';
import { DocsCategory } from 'fumadocs-ui/page';
 
const page = source.getPage(['...'], 'cn');
 
// force to use English page tree
<DocsCategory page={page} from={source} tree={source.pageTree['en']} />;

Configurations

Full Mode

To extend the page to fill up all available space, pass full to the page component. This will force TOC to be shown as a popover.

import { DocsPage } from 'fumadocs-ui/page';
 
<DocsPage full>...</DocsPage>;

Table of Contents

An overview of all the headings in your document.

It requires an array of headings. For Markdown and MDX documents, You can obtain it using the TOC Utility. Content sources like Fumadocs MDX offer this out-of-the-box.

import { DocsPage } from 'fumadocs-ui/page';
 
<DocsPage toc={headings}>...</DocsPage>;

Options

Customise or disable TOC from your documentation with the tableOfContent option.

import { DocsPage } from 'fumadocs-ui/page';
 
<DocsPage tableOfContent={options}>...</DocsPage>;
PropTypeDefault
header
ReactNode
-
footer
ReactNode
-
single
boolean
true
enabled
boolean
-
component
ReactNode
-
style
"normal" | "clerk"
'normal'

Popover Mode

On smaller devices, it is shown on a popover instead. Customise it with the tableOfContentPopover option.

import { DocsPage } from 'fumadocs-ui/page';
 
<DocsPage tableOfContentPopover={options}>...</DocsPage>;
PropTypeDefault
header
ReactNode
-
footer
ReactNode
-
enabled
boolean
-
component
ReactNode
-
style
"normal" | "clerk"
'normal'

Style

You can choose another style for TOC, like clerk inspired by https://clerk.com:

import { DocsPage } from 'fumadocs-ui/page';
 
<DocsPage
  tableOfContent={{
    style: 'clerk',
  }}
>
  ...
</DocsPage>;

Last Updated Time

Display last updated time of the page.

import { DocsPage } from 'fumadocs-ui/page';
 
<DocsPage lastUpdate={new Date(lastModifiedTime)} />;

Since you might have different version controls (e.g. Github) or it's from remote sources like Sanity, Fumadocs UI doesn't display the last updated time by default.

For Github hosted documents, you can use the getGithubLastEdit utility.

import { DocsPage } from 'fumadocs-ui/page';
import { getGithubLastEdit } from 'fumadocs-core/server';
 
const time = await getGithubLastEdit({
  owner: 'fuma-nama',
  repo: 'fumadocs',
  path: `content/docs/${page.file.path}`,
});
 
<DocsPage lastUpdate={new Date(time)} />;

Note

You can also specify the last updated time of documents (e.g. using frontmatter). Don't forget to update the schema type on Fumadocs MDX first.

Edit on GitHub

Add "Edit on GitHub" button to the page.

import { DocsPage } from 'fumadocs-ui/page';
 
<DocsPage
  editOnGithub={{
    owner: 'fuma-nama',
    repo: 'fumadocs',
    sha: 'main',
    // file path, make sure it's valid
    path: `content/docs/${page.file.path}`,
  }}
/>;

Footer is a navigation element that has two buttons to jump to the next and previous pages. When not specified, it shows the neighbour pages found from page tree.

Customise the footer with the footer option.

import { DocsPage, DocsBody } from 'fumadocs-ui/page';
 
<DocsPage footer={options}>
  <DocsBody>...</DocsBody>
</DocsPage>;
PropTypeDefault
enabled
boolean
-
component
ReactNode
-
items
{ previous?: { name: string; url: string; } | undefined; next?: { name: string; url: string; } | undefined; }
-

A navigation element, shown only when user is navigating in folders.

PropTypeDefault
enabled
boolean
-
component
ReactNode
-
full
boolean
false
includeRoot
boolean | { url: string; }
false
includePage
boolean
true
includeSeparator
boolean
false

MDX Page

In conjunction of Fumadocs MDX, you may create a page.mdx file and add the following.

export { withArticle as default } from 'fumadocs-ui/page';
 
## Hello World

This creates a page with MDX, with proper typography styles applied.

Edit on GitHub

Last updated on

Previous

Navbar

Next

Root Provider

On this page