Theming

Usage

You can import the pre-built stylesheet.

import 'fumadocs-ui/style.css';

Notice that the stylesheet performs preflight (aka normalization)

For Tailwind CSS projects, 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, pass the dir prop to body.

<body dir="rtl"></body>

Also pass the same prop to root provider to configure Radix UI RTL layout.

import { RootProvider } from '@fumadocs-ui/provider';
 
<RootProvider dir="rtl"></RootProvider>;

Layout Width

Customise the max width of docs layout with CSS Variables.

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

Themes

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

global.css

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

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',
    }),
  ],
};

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">...</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,
    }),
  ],
};

Layout Width

Customise the max width of docs layout with Tailwind CSS plugin.

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

On this page