Themes

Add Theme to Fumadocs UI

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,
    }),
  ],
};
Edit on GitHub

Last updated on

Previous

Navigation

Next

Components

On this page