Fumadocs

@contour-ui/fumadocs is the interface of a documentation site on Fumadocs, built from the styled components: the sidebar and the header, the search, the table of contents, the parts of a page and the components of its MDX. It takes the place of fumadocs-ui, the interface Fumadocs ships: install one or the other, not both. This site runs on it.

What comes from where

• fumadocs-core gives the data: the page tree of the content (loader()), the table of contents of each page, the search index and the client that searches it. Its adapters (fumadocs-core/framework/*) give the links, the current path and the router of your framework, so the package works in any framework they cover, such as React Router, Next.js, TanStack Start and Waku.
• fumadocs-mdx compiles the pages: their frontmatter, ids for their headings, code highlighted by Shiki, and the text the search indexes. Another content source of fumadocs-core works too: the layouts need its page tree and the table of contents of each page.
• @contour-ui/fumadocs draws it with the styled components and the tokens: the provider and the layouts from @contour-ui/fumadocs, the MDX components from @contour-ui/fumadocs/mdx, and one stylesheet, @contour-ui/fumadocs/styles.css.

What you get

• A docs layout. From 48rem, a sidebar with the sections of the docs, the pages of the current one in folders that open and close, and a button that collapses it; below, a header whose menu holds the same. Each page shows its title and description, the previous and the next page of its section, and its table of contents: a column beside the text from 80rem, a bar above it below. See Layouts.
• Search in a dialog, on the static index of fumadocs-core: results grouped by page, the query highlighted, ⌘ K or Ctrl K from anywhere. See Search.
• MDX components. Headings that link to themselves; links, tables and code blocks drawn by the styled Link, Table and CodeBlock; code block tabs, and install commands for every package manager; Callout, Cards, Kbd, Preview and Tabs on every page without an import; and Prose for the text. See MDX components.
• Themes. Dark and light from the tokens, a toggle in the layouts, with the theme of the operating system as a third choice if you want it, the user's choice remembered and in place before the first paint. See Styling.
• Accessibility. Landmarks, a skip link, every control within reach of the keyboard, and focus where the reader is after a search or a menu.
• Server rendering. Pages prerender, render on a server, or render as React Server Components (Next.js App Router), and hydrate without a flash of the wrong theme or sidebar.

Install

npm install @contour-ui/fumadocs @contour-ui/react @contour-ui/tokens fumadocs-core fumadocs-mdx

pnpm add @contour-ui/fumadocs @contour-ui/react @contour-ui/tokens fumadocs-core fumadocs-mdx

yarn add @contour-ui/fumadocs @contour-ui/react @contour-ui/tokens fumadocs-core fumadocs-mdx

bun add @contour-ui/fumadocs @contour-ui/react @contour-ui/tokens fumadocs-core fumadocs-mdx

React 19, React DOM 19 and fumadocs-core are peer dependencies. Setup wires the package into React Router or Next.js.

Load the stylesheets

Import them once, at the root of the app, in this order:

import '@contour-ui/tokens/tokens.css';
import '@contour-ui/tokens/fonts.css';
import '@contour-ui/fumadocs/styles.css';
import '@contour-ui/react/styles.css';

Your own CSS comes last, outside any layer: it overrides every style of contour-ui. The layers, the classes and the variables you can override are on the Styling page.

In this section