Themes

Usage

Only Tailwind CSS v4 is supported, the preset will also include source to Fumadocs UI itself:

Tailwind CSS

@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';

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>
  );
}

Layout Width

Customise the max width of docs layout with CSS Variables.

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

Tailwind CSS Preset

Fumadocs UI adds its own colors, animations, and utilities with Tailwind CSS preset.

Colors

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

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

Neutral

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

global.css

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

For Shadcn UI, you can use the shadcn preset instead. It uses colors from your Shadcn UI theme.

@import 'tailwindcss';
@import 'fumadocs-ui/css/shadcn.css';
@import 'fumadocs-ui/css/preset.css';

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.

On this page