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

It applies the Typography styles, wrap your content inside.

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 content sources may offer this out-of-the-box.

You can easily customise or disable TOC in your documentation.

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

Options

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.

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

Footer

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.

You can also customise it with items prop.

Breadcrumb

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

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.