2025/01/15
Themes
Add Theme to Fumadocs UI
More Posts
Newsletter
Join the community
Subscribe to our newsletter for the latest news and updates
Add Theme to Fumadocs UI
Join the community
Subscribe to our newsletter for the latest news and updates
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 } 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>
);
}
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 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.