MkSaaS DocsThemes
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';Neutral theme preview
Black theme preview
Vitepress theme preview
Dusk theme preview
Catppuccin theme preview
Ocean theme preview
Purple theme preview
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.