Page

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

Usage

import { DocsPage, DocsBody } from 'fumadocs-ui/page';

<DocsPage>
  <DocsBody>...</DocsBody>
</DocsPage>

Prop	Type	Default
`toc`	`TableOfContents`	-
`tableOfContent`	`Partial<TableOfContentOptions>`	-
`breadcrumb`	`Partial<BreadcrumbOptions>`	-
`footer`	`Partial<FooterOptions>`	-
`lastUpdate`	`string \| number \| Date`	-
`children`	`ReactNode`	-

Body

To apply the Typography styles, wrap your content in the DocsBody component.

import { DocsBody } from 'fumadocs-ui/page';

<DocsBody>
  <h1>This heading looks good!</h1>
</DocsBody>

It is an array with all the headings in your document. For Markdown or MDX documents, You can parse TOC by using the TOC Utility. Some source providers may offer this out-of-the-box.

In addition, you can easily customise or disable TOC in your documentation.

Prop	Type	Default
`footer`	`ReactNode`	-
`header`	`ReactNode`	-
`enabled`	`boolean`	-
`component`	`ReactNode`	-

Last Update Time

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

For Github hosted documents, you can use the Git Last Modified utility.

<DocsPage lastUpdate={new Date(lastModifiedTime)} />

Footer is a navigation element that has two buttons to jump to the next and previous pages. By default, it finds the neighbour pages from page tree.

Prop	Type	Default
`enabled`	`boolean`	-
`component`	`ReactNode`	-
`items`	`{ previous?: { name: string; url: string; } \| undefined; next?: { name: string; url: string; } \| undefined; }`	-

Prop	Type	Default
`enabled`	`boolean`	-
`component`	`ReactNode`	-

Usage

Body

Table of Contents

Last Update Time

Footer

On this page