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>;

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>;

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>;

Last Updated Time

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 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.

Customise the footer with the footer option.

import { DocsPage, DocsBody } from 'fumadocs-ui/page';
 
<DocsPage footer={options}>
  <DocsBody>...</DocsBody>
</DocsPage>;

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.