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>

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>

Table of Contents

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.

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

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.

Breadcrumb