LogoMkSaaS Docs
    LogoMkSaaS Docs
    Homepage

    Introduction

    Quick StartWhat is FumadocsComparisons

    Setup

    Manual InstallationStatic Export

    Writing

    MarkdownInternationalization

    UI

    OverviewThemesSearch
    Components
    MDX
    Docs LayoutHome LayoutNotebookDocs PageRoot Provider
    X (Twitter)
    Layouts

    Docs Page

    A page in your documentation

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

    Usage

    page.tsx
    import {
  DocsPage,
  DocsDescription,
  DocsTitle,
  DocsBody,
} from 'fumadocs-ui/page';

<DocsPage>
  <DocsTitle>title</DocsTitle>
  <DocsDescription>description</DocsDescription>
  <DocsBody>...</DocsBody>
</DocsPage>;

    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.

    Body

    It applies the Typography styles, wrap your content inside.

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

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

    Category

    Optional, link the other pages in its (page tree) folder with cards.

    You can use this component without <DocsPage />.

    page.tsx
    import { source } from '@/lib/source';
import { DocsCategory } from 'fumadocs-ui/page';

const page = source.getPage(['...']);

<DocsCategory page={page} from={source} />;

    Demo:

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

    Customise or disable TOC from your documentation with the tableOfContent option.

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

<DocsPage tableOfContent={options}>...</DocsPage>;

    Style

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

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

<DocsPage
  tableOfContent={{
    style: 'clerk',
  }}
>
  ...
</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

    Display last updated time of the page.

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

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

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

    import { DocsPage } from 'fumadocs-ui/page';
import { getGithubLastEdit } from 'fumadocs-core/server';

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

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

    Note

    You can also specify the last updated time of documents (e.g. using frontmatter). Don't forget to update the schema type on Fumadocs MDX first.

    Edit on GitHub

    Add "Edit on GitHub" button to the page.

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

<DocsPage
  editOnGithub={{
    owner: 'fuma-nama',
    repo: 'fumadocs',
    sha: 'main',
    // file path, make sure it's valid
    path: `content/docs/${page.file.path}`,
  }}
/>;

    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.

    Notebook

    A more compact version of Docs Layout

    Root Provider

    The context provider of Fumadocs UI.

    Table of Contents

    Usage
    Body
    Category
    Configurations
    Full Mode
    Table of Contents
    Style
    Popover Mode
    Last Updated Time
    Edit on GitHub
    Footer
    Breadcrumb
    MDX Page