Layouts
Docs Page
A page in your documentation
Page is the base element of a documentation, it includes Table of contents, Footer, and Breadcrumb.
MkSaaS DocsA page in your documentation
Page is the base element of a documentation, it includes Table of contents, Footer, and Breadcrumb.
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.
It applies the Typography styles, wrap your content inside.
import { DocsBody }
Optional, link the other pages in its (page tree) folder with cards.
You can use this component without <DocsPage />.
import { source }
Demo:
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 }
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 }
Customise or disable TOC from your documentation with the tableOfContent option.
import { DocsPage }
You can choose another style for TOC, like clerk inspired by https://clerk.com:
import { DocsPage }
On smaller devices, it is shown on a popover instead.
Customise it with the tableOfContentPopover option.
import { DocsPage }
Display last updated time of the page.
import { DocsPage }
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 }
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.
Add "Edit on GitHub" button to the page.
import { DocsPage }
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 }
A navigation element, shown only when user is navigating in folders.
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 WorldThis creates a page with MDX, with proper typography styles applied.