Root Provider
The context provider of Fumadocs UI.
The context provider of all the components, including next-themes and <FrameworkProvider />. It should be located at the root layout.
Usage
Import it according to your React.js framework:
import { RootProvider } from 'fumadocs-ui/provider/next';
export default function Layout({ children }) {
return (
<html lang="en">
<body>
<RootProvider>{children}</RootProvider>
</body>
</html>
);
}Search Dialog
Customize or disable the search dialog with search option.
<RootProvider
search={{
enabled: false,
}}
>
{children}
</RootProvider>Learn more from Search.
Theme Provider
Fumadocs supports light/dark modes with next-themes.
Customize or disable it with theme option.
<RootProvider
theme={{
enabled: false,
}}
>
{children}
</RootProvider>You can also install & reference next-themes in your code for managing themes.
Hotkey
Pressing D toggles between light and dark mode.
It is ignored while you are typing in an editable element (such as <input />), or when a dialog like the search dialog is opened.
Pass another key to theme.hotKey, or false to disable it.
<RootProvider
theme={{
hotKey: false,
}}
>
{children}
</RootProvider>A function is also accepted for full control over the matched key combination.
<RootProvider
theme={{
hotKey: (e) => e.shiftKey && e.key === 'D',
}}
>
{children}
</RootProvider>How is this guide?
Last updated on