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';
// fill this with your actual GitHub info, for example:
export const gitConfig = {
user: 'fuma-nama',
repo: 'fumadocs',
branch: 'main',
};
export function baseOptions(): BaseLayoutProps {
return {
nav: {
title: 'Waku',
},
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?
Last updated on