Themes
Add Theme to Fumadocs UI
Usage
Note only Tailwind CSS v4 is supported:
@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.
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 }) {
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:
@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.
Themes
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';
Colors
The design system was inspired by Shadcn UI, you can easily customize the colors using CSS variables.
: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.
More Posts
The Difference Between Fantasy Escalation and Real Continuity
Fantasy can hook you fast. Continuity builds something that lasts. How to tell which one you're in — and why it matters for how you design and choose AI relationships.
Comparisons
How is Fumadocs different from other existing frameworks?
How to Create a Character That Feels Relational, Not Decorative
The most beautiful character designs get one visit. The ones users return to are built differently — around connection, not just aesthetic. Here's how to build for return.
Newsletter
Join the community
Subscribe to our newsletter for the latest news and updates