Add Theme to Fumadocs UI
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';By using the Tailwind CSS plugin, or the pre-built stylesheet, your default border, text and background colors will be changed.
Fumadocs supports light/dark modes with next-themes, it is included in Root Provider.
See Root Provider to learn more.
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 }
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.
Customise the max width of docs layout with CSS Variables.
:root {
--fd-layout-width: 1400px;
}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';
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%);
}We have a built-in plugin forked from Tailwind CSS Typography.
The plugin adds a prose class and variants to customise it.
<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.
Join the community
Subscribe to our newsletter for the latest news and updates
