Themes

Usage

Initialize Tailwind CSS on your Next.js app, use the official Tailwind CSS plugin:

tailwind.config.js

import { createPreset } from 'fumadocs-ui/tailwind-plugin';
 
/** @type {import('tailwindcss').Config} */
export default {
  darkMode: 'class',
  presets: [createPreset()],
  content: [
    './node_modules/fumadocs-ui/dist/**/*.js',
 
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './content/**/*.mdx',
    './mdx-components.tsx',
  ],
};

ESM-Only

Use ESM syntax on your configuration file.

Global Styles

By using the Tailwind CSS plugin, or the pre-built stylesheet, your default border, text and background colors will be changed.

Light/Dark Modes

Fumadocs supports light/dark modes with next-themes. The Theme Provider is a part of Root Provider.

See Root Provider to learn more.

RTL Layout

RTL (Right-to-left) layout is supported.

To enable RTL, set the dir prop to rtl in body and root provider (required for Radix UI).

import { RootProvider } from 'fumadocs-ui/provider';
import type { ReactNode } from 'react';
 
export default function RootLayout({
  children,
}: {
  children: ReactNode;
}): ReactNode {
  return (
    <html lang="en" suppressHydrationWarning>
      <body dir="rtl">
        <RootProvider dir="rtl">{children}</RootProvider>
      </body>
    </html>
  );
}

CSS Variables

Fumadocs UI provides some CSS variables for customising the layout.

When the default navbar is replaced, the layout may overlap with your new navbar.

You should set the --fd-nav-height variable to the height of your navbar.

:root {
  --fd-nav-height: 40px !important;
}

You can use it with CSS media queries.

Layout Width

Customise the max width of docs layout with CSS Variables.

:root {
  --fd-layout-width: 1400px;
}

Colors

The design system was inspired by Shadcn UI, you can easily customize all colors using CSS variables.

global.css

:root {
  /* hsl colors */
  /* use whitespace instead of comma */
  --fd-background: 0 0% 100%;
  --fd-foreground: 222.2 47.4% 11.2%;
 
  --fd-muted: 210 40% 96.1%;
  --fd-muted-foreground: 215.4 16.3% 46.9%;
}

Only a subset of colors are provided by Fumadocs UI.

It may not be compatible with Shadcn UI.

Tailwind CSS Plugin

The official Tailwind CSS plugin introduces new colors and extra utilities including steps.

Presets

It comes with many theme presets out-of-the-box, you can pick one you prefer rather than the default one.

import { createPreset } from 'fumadocs-ui/tailwind-plugin';
 
/** @type {import('tailwindcss').Config} */
export default {
  presets: [
    createPreset({
      preset: 'ocean',
    }),
  ],
};

`neutral`

Neutral

`vitepress`

Vitepress

`dusk`

Dusk

`catppuccin`

Catppuccin

`ocean`

Ocean

`purple`

Purple

Typography

We use the Tailwind CSS Typography plugin internally, you can customize it with CSS.

The Tailwind CSS plugin overrides the default configuration for the Typography plugin. You can use the prose utility directly.

<div className="prose">
  <h1>Good Heading</h1>
</div>

Colors

Fumadocs UI has its own colors, animations, and utilities. It adds the colors with a fd- prefix, you can reference them with the prefix like bg-fd-background.

To remove the prefix, enable addGlobalColors.

import { createPreset } from 'fumadocs-ui/tailwind-plugin';
 
/** @type {import('tailwindcss').Config} */
export default {
  presets: [
    createPreset({
      addGlobalColors: true,
    }),
  ],
};

Usage

Global Styles

Light/Dark Modes

RTL Layout

CSS Variables

Navbar Height

Layout Width

Colors

Tailwind CSS Plugin

Presets

`neutral`

`vitepress`

`dusk`

`catppuccin`

`ocean`

`purple`

Typography

Colors

On this page