Waku
Setup Fumadocs on Waku.
Getting Started
Before continuing, make sure to configure:
- Tailwind CSS 4.
- Fumadocs MDX: follow the Vite setup guide and create essential files like
lib/source.ts.
Installation
npm i fumadocs-core fumadocs-uiStyles
Add the following to your Tailwind CSS file:
@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';Create Pages
Create a file for sharing layout props:
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
import { appName, gitConfig } from './shared';
export function baseOptions(): BaseLayoutProps {
return {
nav: {
// JSX supported
title: appName,
},
githubUrl: `https://github.com/${gitConfig.user}/${gitConfig.repo}`,
};
}
Create the following files:
import defaultMdxComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';
export function getMDXComponents(components?: MDXComponents) {
return {
...defaultMdxComponents,
...components,
} satisfies MDXComponents;
}
export const useMDXComponents = getMDXComponents;
declare global {
type MDXProvidedComponents = ReturnType<typeof getMDXComponents>;
}
Finally, wrap your entire app under Fumadocs providers:
'use client';
import type { ReactNode } from 'react';
import { RootProvider } from 'fumadocs-ui/provider/waku';
export function Provider({ children }: { children: ReactNode }) {
return <RootProvider>{children}</RootProvider>;
}
Done
You can start writing documents at content/docs:
---
title: Hello World
---
I love FumadocsHow is this guide?