Overview
An overview of Fumadocs UI
Architecture
Sidebar
Docs Page
Footer
TOC
| Sidebar | Display site title and navigation elements. |
| Page Tree | Passed by you, mainly rendered as the items of sidebar. |
| Docs Page | All content of the page. |
| TOC | Navigation within the article. |
Page Tree
Navigation elements like sidebar take a Page Tree to render navigation links, it's a tree that describes all available pages and folders.
Normally, it is generated from your file structure using loader(), you can learn how to organize pages.
Customisation
Layouts
You can use the exposed options of different layouts:
Docs Layout
Layout for docs
Docs Page
Layout for docs content
Notebook Layout
A more compact version of Docs Layout
Home Layout
Layout for other pages
Components
Fumadocs UI also offers styled components for interactive examples to enhance your docs, you can customise them with exposed props like style and className.
See Components.
Design System
Since the design system is built on Tailwind CSS, you can customise it with CSS Variables.
CLI
Fumadocs CLI is a tool that installs components to your codebase, similar to Shadcn UI.
Use it to install Fumadocs UI components:
Or customise layouts:
How is this guide?