---
title: Waku
description: Setup Fumadocs on Waku.
---

## Getting Started

Before continuing, make sure to configure:

- Tailwind CSS 4.
- Fumadocs MDX: follow the [Vite setup guide](/docs/mdx/vite) and create essential files like `lib/source.ts`.

### Installation

```npm
npm i fumadocs-core fumadocs-ui
```

### Styles

Add the following to your Tailwind CSS file:

```css title="src/styles/globals.css"
@import 'tailwindcss';
/* [!code ++:2] */
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
```

### Create Pages

Create a file for sharing layout props:

<include cwd meta='title="lib/layout.shared.tsx"'>
  ../../examples/waku/src/lib/layout.shared.tsx
</include>

Create the following files:

<include cwd meta='tab="components/mdx.tsx"'>
  ../../examples/waku/src/components/mdx.tsx
</include>
<include cwd meta='tab="pages/docs/_layout.tsx"'>
  ../../examples/waku/src/pages/docs/_layout.tsx
</include>
<include cwd meta='tab="pages/docs/[...slugs].tsx"'>
  ../../examples/waku/src/pages/docs/[...slugs].tsx
</include>
<include cwd meta='tab="pages/_api/api/search.ts"'>
  ../../examples/waku/src/pages/_api/api/search.ts
</include>

Finally, wrap your entire app under Fumadocs providers:

<include cwd meta='tab="components/provider.tsx"'>
  ../../examples/waku/src/components/provider.tsx
</include>

```tsx tab="pages/_layout.tsx"
import '@/styles/globals.css';
import type { ReactNode } from 'react';
import { Provider } from '@/components/provider';

// [!code ++:3]
export default function RootLayout({ children }: { children: ReactNode }) {
  return <Provider>{children}</Provider>;
}

export const getConfig = async () => {
  return {
    render: 'static',
  };
};
```

### Done

You can start writing documents at `content/docs`:

```mdx title="content/docs/index.mdx"
---
title: Hello World
---

I love Fumadocs
```
