Theming

Usage

You can import the pre-built stylesheet.

import 'fumadocs-ui/style.css';

Notice that the stylesheet performs preflight (or normalization)

For Tailwind CSS projects, please use the built-in Tailwind CSS plugin instead.

tailwind.config.js

const { createPreset } = require('fumadocs-ui/tailwind-plugin');

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  presets: [createPreset()],
  content: [
    './node_modules/fumadocs-ui/dist/**/*.js',
    ...
  ],
};

Ensure all files inside fumadocs-ui are included in the content property.

Global Styles

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

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 compatible with Shadcn UI.

DocsUI Plugin

It comes with the DocsUI Tailwind CSS plugin by default, it introduces new colors and extra utilities including steps.

Presets

This plugin also provides several theme presets out-of-the-box, you can pick one you prefer rather than the default one.

const { createPreset } = require('fumadocs-ui/tailwind-plugin');

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    createPreset({
      preset: 'ocean',
    }),
  ],
};

Typography

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

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

<div className="prose">...</div>