Overview
An overview of Fumadocs UI
Architecture
Sidebar
Title
Sidebar Tabs
Search
Page Tree
Footer
Docs Page
Article Title
Description
Body
Edit on GitHub
Last Updated
Footer
Previous
Next
TOC
Banner
Items
Footer
Nav
Title
Search
Menu
TOC Trigger
Docs Page
Article Title
Description
Body
Edit on GitHub
Last Updated
Footer
Previous
Next
Nav
Title
Search
Menu
Sidebar
Sidebar Tabs
Search
Page Tree
Footer
| 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. |
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.
npx @fumadocs/clipnpm dlx @fumadocs/cliyarn dlx @fumadocs/clibun x @fumadocs/cliUse it to install Fumadocs UI components:
npx @fumadocs/cli addpnpm dlx @fumadocs/cli addyarn dlx @fumadocs/cli addbun x @fumadocs/cli addOr customise layouts:
npx @fumadocs/cli customisepnpm dlx @fumadocs/cli customiseyarn dlx @fumadocs/cli customisebun x @fumadocs/cli customiseHow is this guide?