Themes

Usage

Note only Tailwind CSS v4 is supported:

global.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';

Preflight Changes

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, it is included in Root Provider.

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 }) {
	return (
		<html lang="en" suppressHydrationWarning>
			<body dir="rtl">
				<RootProvider dir="rtl">{children}</RootProvider>
			</body>
		</html>
	);
}

Prefix

Fumadocs UI has its own colors, animations, and utilities. By default, it adds a fd- prefix to avoid conflicts with Shadcn UI or your own CSS variables.

You can use them without the prefix by adding some aliases:

global.css

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

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

Layout Width

Customise the max width of docs layout with CSS Variables.

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

Tailwind CSS Preset

The Tailwind CSS preset introduces new colors and extra utilities including fd-steps.

It comes with many themes out-of-the-box, you can pick one you prefer.

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

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

Available themes:

neutral
black
vitepress
dusk
catppuccin
ocean
purple

Colors

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

global.css

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

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

Typography

We have a built-in plugin forked from Tailwind CSS Typography.

The plugin adds a prose class and variants to customise it.

<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.

Themes

On this page