Theming Fumadocs UI

Getting Started

Fumadocs UI currently works with Tailwind CSS v4 only, so begin by wiring in the required imports:

Tailwind CSS

@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';

/* path of `fumadocs-ui` relative to the CSS file */
@source '../node_modules/fumadocs-ui/dist/**/*.js';

What Preflight Changes

When you use either the Tailwind CSS plugin or the prebuilt stylesheet, Fumadocs updates the default border, text, and background colors in your project.

Light and Dark Mode

Theme switching is handled through next-themes, which is already bundled into the Root Provider.

See Root Provider for the full setup details.

RTL Support

Right-to-left layouts are supported as well.

To turn RTL on, apply dir="rtl" to both body and the root provider so that Radix UI components stay in sync.

import { RootProvider } from 'fumadocs-ui/provider';
import type { ReactNode } from 'react';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body dir="rtl">
        <RootProvider dir="rtl">{children}</RootProvider>
      </body>
    </html>
  );
}

Prefixes

Fumadocs UI ships with its own utilities, animations, and color variables. To avoid clashes with Shadcn UI or your own design tokens, those values use the fd- prefix by default.

If you prefer unprefixed aliases, map them yourself:

Tailwind CSS

@theme {
  --color-primary: var(--color-fd-primary);
}

You can use it with CSS media queries for responsive design.

Layout Width

The documentation layout width can be adjusted with CSS variables.

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

Tailwind CSS Preset

The preset layer adds extra utilities such as fd-steps, along with the theme color system.

Built-in Themes

Several themes are available out of the box, so you can choose the one that best matches your product.

@import 'fumadocs-ui/css/<theme>.css';

/* Example */
@import 'fumadocs-ui/css/black.css';

Neutral

Black

Vitepress

Dusk

Catppuccin

Ocean

Purple

Colors

The design language is influenced by Shadcn UI, and the easiest way to personalize it is by overriding CSS variables.

global.css

:root {
  --color-fd-background: hsl(0, 0%, 100%);
}

.dark {
  --color-fd-background: hsl(0, 0%, 0%);
}

Typography

Fumadocs includes a built-in typography plugin derived from Tailwind CSS Typography.

It provides the prose class plus variants you can style further.

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

The plugin works with and only with Fumadocs UI's MDX components, it may conflict with @tailwindcss/typography. If you need to use @tailwindcss/typography over the default plugin, set a class name option to avoid conflicts.

Getting Started

Fumadocs UI currently works with Tailwind CSS v4 only, so begin by wiring in the required imports:

Tailwind CSS

@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';

/* path of `fumadocs-ui` relative to the CSS file */
@source '../node_modules/fumadocs-ui/dist/**/*.js';

What Preflight Changes

When you use either the Tailwind CSS plugin or the prebuilt stylesheet, Fumadocs updates the default border, text, and background colors in your project.

Light and Dark Mode

Theme switching is handled through next-themes, which is already bundled into the Root Provider.

See Root Provider for the full setup details.

RTL Support

Right-to-left layouts are supported as well.

To turn RTL on, apply dir="rtl" to both body and the root provider so that Radix UI components stay in sync.

import { RootProvider } from 'fumadocs-ui/provider';
import type { ReactNode } from 'react';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body dir="rtl">
        <RootProvider dir="rtl">{children}</RootProvider>
      </body>
    </html>
  );
}

Prefixes

Fumadocs UI ships with its own utilities, animations, and color variables. To avoid clashes with Shadcn UI or your own design tokens, those values use the fd- prefix by default.

If you prefer unprefixed aliases, map them yourself:

Tailwind CSS

@theme {
  --color-primary: var(--color-fd-primary);
}

You can use it with CSS media queries for responsive design.

Layout Width

The documentation layout width can be adjusted with CSS variables.

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

Tailwind CSS Preset

The preset layer adds extra utilities such as fd-steps, along with the theme color system.

Built-in Themes

Several themes are available out of the box, so you can choose the one that best matches your product.

@import 'fumadocs-ui/css/<theme>.css';

/* Example */
@import 'fumadocs-ui/css/black.css';

Neutral

Black

Vitepress

Dusk

Catppuccin

Ocean

Purple

Colors

The design language is influenced by Shadcn UI, and the easiest way to personalize it is by overriding CSS variables.

global.css

:root {
  --color-fd-background: hsl(0, 0%, 100%);
}

.dark {
  --color-fd-background: hsl(0, 0%, 0%);
}

Typography

Fumadocs includes a built-in typography plugin derived from Tailwind CSS Typography.

It provides the prose class plus variants you can style further.

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

Getting Started

What Preflight Changes

Light and Dark Mode

RTL Support

Prefixes

Layout Width

Tailwind CSS Preset

Built-in Themes

Colors

Typography

Author

Categories

More Posts

Orelune Tarot Series: King of Wands - Meaning for Vision, Leadership & Power

Comparisons

Orelune Tarot Series: Six of Cups - Memory, Reunion, and Gentle Emotional Return

Newsletter

Theming Fumadocs UI

Getting Started

What Preflight Changes

Light and Dark Mode

RTL Support

Prefixes

Layout Width

Tailwind CSS Preset

Built-in Themes

Colors

Typography

Author

Categories

More Posts

Orelune Tarot Series: King of Wands - Meaning for Vision, Leadership & Power

Comparisons

Orelune Tarot Series: Six of Cups - Memory, Reunion, and Gentle Emotional Return

Newsletter