---
title: Docs Page
description: A page in your documentation
---

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

<Customization />

## Usage

Import it according to your layout.

```tsx title="page.tsx" tab="Docs Layout"
import { DocsPage, DocsDescription, DocsTitle, DocsBody } from 'fumadocs-ui/layouts/docs/page';

<DocsPage>
  <DocsTitle>title</DocsTitle>
  <DocsDescription>description</DocsDescription>
  <DocsBody>
    <h2>This heading looks good!</h2>
    It applies the Typography styles, wrap your content here.
  </DocsBody>
</DocsPage>;
```

```tsx title="page.tsx" tab="Notebook Layout"
import { DocsPage, DocsDescription, DocsTitle, DocsBody } from 'fumadocs-ui/layouts/notebook/page';

<DocsPage>
  <DocsTitle>title</DocsTitle>
  <DocsDescription>description</DocsDescription>
  <DocsBody>
    <h2>This heading looks good!</h2>
    It applies the Typography styles, wrap your content here.
  </DocsBody>
</DocsPage>;
```

<Callout type='info' title='Good to know'>

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

</Callout>

### Page Actions

Show GitHub link, and shortcut links for AIs.

```tsx
import { DocsPage, ViewOptionsPopover } from 'fumadocs-ui/layouts/<layout>/page';

const githubUrl = `https://github.com/fuma-nama/fumadocs/blob/main/content/docs/${page.path}`

<DocsPage>
  <ViewOptionsPopover githubUrl={githubUrl} />
</DocsPage>;
```

### Last Updated Time

Display last updated time of the page.

```tsx
import { DocsPage, PageLastUpdate } from 'fumadocs-ui/layouts/<layout>/page';

const lastModifiedTime: Date | undefined;

<DocsPage>
  {/* Other content */}
  {lastModifiedTime && <PageLastUpdate date={lastModifiedTime} />}
</DocsPage>;
```

For `lastModifiedTime`, you can possibly use different version controls like Github or a CMS.

<Tabs items={['Fumadocs MDX', 'GitHub API']}>

    <Tab>

You can enable [`lastModified`](/docs/mdx/last-modified).

```tsx
import { source } from '@/lib/source';
const page = source.getPage(['...']);

const lastModifiedTime = page.data.lastModified;
```

    </Tab>

    <Tab>

For Github hosted documents, you can use
the [`getGithubLastEdit`](/docs/headless/utils/git-last-edit) utility.

```tsx
import { getGithubLastEdit } from 'fumadocs-core/content/github';

const lastModifiedTime = await getGithubLastEdit({
  owner: 'fuma-nama',
  repo: 'fumadocs',
  // file path in Git
  path: `content/docs/${page.path}`,
});
```

    </Tab>

</Tabs>

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

```tsx
import { DocsPage } from 'fumadocs-ui/layouts/<layout>/page';

<DocsPage full>...</DocsPage>;
```

### Table of Contents

An overview of all the headings in your article, it requires an array of headings.

For Markdown and MDX documents, You can obtain it using the
[TOC Utility](/docs/headless/utils/get-toc). Content sources like Fumadocs MDX offer this out-of-the-box.

```tsx
import { DocsPage } from 'fumadocs-ui/layouts/<layout>/page';

<DocsPage toc={headings}>...</DocsPage>;
```

You can customize it with `tableOfContent`, or with `tableOfContentPopover` on smaller devices.

```tsx title="page.tsx"
import { DocsPage } from 'fumadocs-ui/layouts/<layout>/page';

return (
  <DocsPage tableOfContent={options} tableOfContentPopover={options}>
    ...
  </DocsPage>
);
```

<auto-type-table type="import('fumadocs-ui/layouts/docs/page/slots/toc').TOCProps" />

#### Style

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

```tsx
import { DocsPage } from 'fumadocs-ui/layouts/<layout>/page';

<DocsPage
  tableOfContent={{
    style: 'clerk',
  }}
>
  ...
</DocsPage>;
```

#### Replace TOC

To replace the component:

```tsx tab="page.tsx"
import { TOCProvider, TOC, TOCPopover } from './my-toc';

return (
  <DocsPage
    slots={{
      toc: {
        provider: TOCProvider,
        main: TOC,
        popover: TOCPopover,
      },
    }}
  >
    ...
  </DocsPage>
);
```

```tsx tab="my-toc.tsx"
'use client';
import type {
  TOCProps,
  TOCPopoverProps,
  TOCProviderProps,
} from 'fumadocs-ui/layouts/<layout>/page/slots/toc';

export function TOCProvider({ toc, children }: TOCProviderProps) {
  // receive TOC items, you can pass it down via React contexts
  console.log(toc);
  return children;
}

export function TOC(props: TOCProps) {
  return <div>Hello World</div>;
}

export function TOCPopover(props: TOCPopoverProps) {
  return <div>Popover</div>;
}
```

You can start from the default implementation with Fumadocs CLI:

```bash tab="Docs Layout"
npx @fumadocs/cli add slots/docs/page/toc
```

```bash tab="Notebook Layout"
npx @fumadocs/cli add slots/notebook/page/toc
```

```bash tab="Flux Layout"
npx @fumadocs/cli add slots/flux/page/toc
```

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

Customize the footer with the `footer` prop:

```tsx
import { DocsPage } from 'fumadocs-ui/layouts/<layout>/page';

<DocsPage footer={options}>...</DocsPage>;
```

<auto-type-table type="Omit<import('fumadocs-ui/layouts/docs/page').FooterProps, keyof React.ComponentProps<'div'>>" />

#### Replace Footer

To replace the component:

```tsx tab="page.tsx"
import { DocsPage } from 'fumadocs-ui/layouts/<layout>/page';
import { Footer } from './my-footer';

<DocsPage
  slots={{
    footer: Footer,
  }}
/>;
```

```tsx tab="my-footer.tsx"
'use client';
import type { FooterProps } from 'fumadocs-ui/layouts/<layout>/page/slots/footer';

export function Footer(props: FooterProps) {
  return <div>Hello World</div>;
}
```

You can start from the default implementation with Fumadocs CLI:

```bash tab="Docs Layout"
npx @fumadocs/cli add slots/docs/page/footer
```

```bash tab="Notebook Layout"
npx @fumadocs/cli add slots/notebook/page/footer
```

```bash tab="Flux Layout"
npx @fumadocs/cli add slots/flux/page/footer
```

### Breadcrumb

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

Customize the breadcrumb with the `breadcrumb` option:

```tsx
import { DocsPage } from 'fumadocs-ui/layouts/<layout>/page';

<DocsPage breadcrumb={options}>...</DocsPage>;
```

<auto-type-table type="Omit<import('fumadocs-ui/layouts/docs/page').BreadcrumbProps, keyof React.ComponentProps<'div'>>" />

#### Replace Breadcrumb

To replace the component:

```tsx tab="page.tsx"
import { DocsPage } from 'fumadocs-ui/layouts/<layout>/page';
import { Breadcrumb } from './my-breadcrumb';

<DocsPage
  slots={{
    breadcrumb: Breadcrumb,
  }}
/>;
```

```tsx tab="my-breadcrumb.tsx"
'use client';
import type { BreadcrumbProps } from 'fumadocs-ui/layouts/<layout>/page/slots/breadcrumb';

export function Breadcrumb(props: BreadcrumbProps) {
  return <div>Hello World</div>;
}
```

You can start from the default implementation with Fumadocs CLI:

```bash tab="Docs Layout"
npx @fumadocs/cli add slots/docs/page/breadcrumb
```

```bash tab="Notebook Layout"
npx @fumadocs/cli add slots/notebook/page/breadcrumb
```

```bash tab="Flux Layout"
npx @fumadocs/cli add slots/flux/page/breadcrumb
```

### Container

Container controls the article wrapper around breadcrumb, body, and footer.

To replace the page container:

```tsx tab="page.tsx"
import { DocsPage } from 'fumadocs-ui/layouts/<layout>/page';
import { Container } from './my-container';

<DocsPage
  slots={{
    container: Container,
  }}
/>;
```

```tsx tab="my-container.tsx"
'use client';

export function Container(props: React.ComponentProps<'article'>) {
  return <div />;
}
```

You can start from the default implementation with Fumadocs CLI:

```bash tab="Docs Layout"
npx @fumadocs/cli add slots/docs/page/container
```

```bash tab="Notebook Layout"
npx @fumadocs/cli add slots/notebook/page/container
```

```bash tab="Flux Layout"
npx @fumadocs/cli add slots/flux/page/container
```
