Installation
Node.js requirement
@farming-labs/docs requires Node.js 20 or later. Make sure your local environment and any CI or deployment environments meet this minimum before installing.
Option A: CLI (Recommended)
Starting from scratch? Use --template with --name <project> to bootstrap a new docs project (Next.js, TanStack Start, Nuxt, SvelteKit, or Astro). No prompts — the CLI creates the project folder and runs install. See the --template section below.
Adding docs to an existing app? Run the init command inside your Next.js, TanStack Start, SvelteKit, Astro, or Nuxt project:
npx @farming-labs/docs initThe CLI will first ask: Are you adding docs to an existing project or starting fresh? Choose Existing project to add docs to the current directory. It will then:
- Detect your framework (Next.js, TanStack Start, SvelteKit, Astro, or Nuxt), or ask you to pick one
- Ask you to pick a theme (including Create your own theme, which prompts for a theme name and scaffolds
themes/<name>.tsandthemes/<name>.css) - Ask about path aliases and which global CSS file to use (defaults are offered; press Enter to accept)
- Ask for the docs entry path (default:
docs— press Enter to accept) - Optionally scaffold i18n by selecting locales, adding custom locale codes, and choosing a default locale TanStack Start currently skips the built-in i18n scaffold so the generated routes stay minimal and working
- Generate config, layout, CSS, and sample pages
- Install dependencies and optionally start the dev server
Prompts that show a placeholder (e.g. entry path, theme name) use that value as the default — you can press Enter to skip typing. See CLI — Init flow for the full sequence.
If you enable i18n, the CLI creates locale folders like docs/en and docs/fr, writes the i18n block to docs.config, and scaffolds the framework-specific files needed for routes like /docs?lang=en.
To upgrade all docs packages to the latest later, run from your project root: npx @farming-labs/docs upgrade (framework is auto-detected). See CLI — Upgrade for options.
Starting from scratch or want a full example? Use --template with --name <project> to bootstrap a ready-to-run docs app. The CLI creates the project folder, bootstraps it with the chosen framework, and runs install:
npx @farming-labs/docs init --template next --name my-docs # Next.js
npx @farming-labs/docs init --template tanstack-start --name my-docs # TanStack Start
npx @farming-labs/docs init --template nuxt --name my-docs # Nuxt
npx @farming-labs/docs init --template sveltekit --name my-docs # SvelteKit
npx @farming-labs/docs init --template astro --name my-docs # AstroReplace my-docs with your project name. Then run cd my-docs and start the dev server (npm run dev, pnpm run dev, yarn dev, or bun run dev).
Option B: Manual Setup
Do not install renderer packages directly
Install only the Farming Labs packages for your chosen framework (listed in each tab below). Do not separately install fumadocs-openapi, fumadocs-ui, fumadocs-core, @scalar/core, or @scalar/nextjs-api-reference. The API reference renderers are bundled inside @farming-labs/docs and the framework adapters; adding those packages directly can cause version conflicts.
Theme CSS in global styles
For each framework below, add your theme's CSS to your global stylesheet (e.g. app/global.css, src/app.css, or nuxt.config). The import path must match the theme you use in docs.config — e.g. default, greentree, darksharp. Without it, docs pages will lack the correct styling.
1. Install packages
npm install @farming-labs/docs @farming-labs/theme @farming-labs/nextMonorepo note: If you are developing
@farming-labs/docsand a TanStack Start app in the same workspace, keep@farming-labs/docs,@farming-labs/theme, and@farming-labs/tanstack-startlinked locally (for exampleworkspace:*). This avoids Node 22 / Vercel trying to load raw adapter TypeScript fromnode_modules.
2. Create docs.config.tsx
import { defineDocs } from "@farming-labs/docs";
import { fumadocs } from "@farming-labs/theme";
export default defineDocs({
entry: "docs",
theme: fumadocs(),
metadata: {
titleTemplate: "%s – Docs",
description: "My documentation site",
},
});3. Create next.config.ts
import { withDocs } from "@farming-labs/next/config";
export default withDocs({});4. Set up RootProvider in app/layout.tsx
Wrap your app with RootProvider from @farming-labs/theme. This enables search, theme switching, and AI chat across all pages.
import { RootProvider } from "@farming-labs/theme";
import "./global.css";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<RootProvider>{children}</RootProvider>
</body>
</html>
);
}
RootProviderautomatically configures the search API endpoint (/api/docs) and handles theme persistence. ThesuppressHydrationWarningon<html>prevents React warnings from the theme class injection.
5. Import theme CSS in app/global.css
Add your theme's CSS to your global stylesheet so docs styling applies. The default fumadocs() theme helper uses @farming-labs/theme/default/css; other built-in themes use their theme name, like @farming-labs/theme/greentree/css.
@import "tailwindcss";
@import "@farming-labs/theme/default/css";6. Write your first doc
Create an MDX file under app/docs/:
app/docs/
page.mdx # /docs
getting-started/
page.mdx # /docs/getting-startedEach page uses frontmatter for metadata:
---
title: "Getting Started"
description: "Your first doc page"
icon: "rocket"
---
# Getting Started
Your content here.That's it — the docs layout (app/docs/layout.tsx) is auto-generated by withDocs(). The framework handles routing, MDX compilation, and metadata from your config.
See CLI for all generated files including the full
app/layout.tsxandapp/docs/layout.tsx, or check Configuration for all available options.
Get up and running in minutes
How is this guide?