Fumadocs 12

Introduce Fumadocs v12


What's New?

Fumadocs v12 mainly aims to improve the UI, prioritizing content and reading experience.

New UI

After observing large docs sites like https://turbo.build, I found the navbar took too much space on the screen, while it only contains links to Blog, Showcase, GitHub, etc. They are not necessarily related to the docs, placing them at the top of our screen doesn't bring a better reading experience.

All these links are now moved to sidebar, allowing a clean, minimal view of docs.


I also noticed the docs start to look messy as your content grows. To ameliorate this, the sidebar now includes a border and background by default. This helps readers to distinguish navigation elements and content easier.

The sidebar will always be placed at the left of screen, having a bigger space on large viewports.

I believe the new UI still has room for improvement. Welcome to report UI issues, or leave a feedback!

Better Multi Page Trees

We supported multiple page trees at a very early version of Fumadocs. However, it lacks of proper explanations and guides to configure it. In the past, you need to implement a navigation element to switch between page trees. And mark the folder as a root folder.

Now, you can use the <RootToggle /> component directly, and docs has a better explanation of it.


Page Tree Post Processors

You can now attach properties to page trees easily with the Source API.

import { loader } from 'fumadocs-core/source';
export const utils = loader({
  pageTree: {
    attachFile(node) {
      // modify the node
      return node;

Improved I18n Support

The language switch is now added to Docs Layout.

import { DocsLayout } from 'fumadocs-ui/layout';
export default function Layout({ children }: { children: React.ReactNode }) {
  return <DocsLayout i18n>{children}</DocsLayout>;

Note that <LanguageSelect /> component is now replaced by <LanguageToggle />, make sure to remove references to the old component.



Remove deprecated option enableThemeProvider from Root Provider. Use theme.enabled instead.


Remove deprecated option minWidth from Sidebar component. Use blockScrollingWidth instead





Create Fumadocs App

Written by

Fuma Nama


Sun Jun 09 2024