---
title: React Router
description: Setup Fumadocs on React Router.
---

## 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="app/app.css"
@import 'tailwindcss';
/* [!code ++:2] */
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
```

### Create Pages

Update your routes:

```ts title="routes.ts"
import { type RouteConfig, index, route } from '@react-router/dev/routes';

export default [
  index('routes/home.tsx'),
  // [!code ++:2]
  route('docs/*', 'routes/docs.tsx'),
  route('api/search', 'routes/search.ts'),
] satisfies RouteConfig;
```

Create the following files:

<include cwd meta='tab="app/components/mdx.tsx"'>
  ../../examples/react-router-min/app/components/mdx.tsx
</include>
<include cwd meta='tab="app/lib/layout.shared.tsx"'>
  ../../examples/react-router-min/app/lib/layout.shared.tsx
</include>
<include cwd meta='tab="app/routes/docs.tsx"'>
  ../../examples/react-router-min/app/routes/docs.tsx
</include>
<include cwd meta='tab="app/routes/search.ts"'>
  ../../examples/react-router-min/app/routes/search.ts
</include>

Wrap your entire app under Fumadocs providers:

```tsx title="root.tsx"
import { Links, Meta, Scripts, ScrollRestoration } from 'react-router';
import { RootProvider } from 'fumadocs-ui/provider/react-router';
import './app.css';

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body className="flex flex-col min-h-screen">
        {/* [!code ++] */}
        <RootProvider>{children}</RootProvider>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}
```

### Done

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

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

I love Fumadocs
```
