Home /

docs

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.

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:

terminal
npx @farming-labs/docs init

The 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:

  1. Detect your framework (Next.js, TanStack Start, SvelteKit, Astro, or Nuxt), or ask you to pick one
  2. Ask you to pick a theme (including Create your own theme, which prompts for a theme name and scaffolds themes/<name>.ts and themes/<name>.css)
  3. Ask about path aliases and which global CSS file to use (defaults are offered; press Enter to accept)
  4. Ask for the docs entry path (default: docs — press Enter to accept)
  5. 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
  6. Generate config, layout, CSS, and sample pages
  7. 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:

terminal
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    # Astro

Replace 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

terminal
npm install @farming-labs/docs @farming-labs/theme @farming-labs/next

Monorepo note: If you are developing @farming-labs/docs and a TanStack Start app in the same workspace, keep @farming-labs/docs, @farming-labs/theme, and @farming-labs/tanstack-start linked locally (for example workspace:*). This avoids Node 22 / Vercel trying to load raw adapter TypeScript from node_modules.

2. Create docs.config.tsx

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

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.

app/layout.tsx
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>
  );
}

RootProvider automatically configures the search API endpoint (/api/docs) and handles theme persistence. The suppressHydrationWarning on <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.

app/global.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-started

Each page uses frontmatter for metadata:

app/docs/getting-started/page.mdx
---
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.tsx and app/docs/layout.tsx, or check Configuration for all available options.

Customize
Live preview on these docs
Reset
Customize
Export Code
Preset
Explore more themes
Primary Color
Primary
Colors
Background
Foreground
Muted Text
Border
Card
Muted BG
Ring
Layout
SidebarBordered
TOC StyleDirectional (tree)
TOC DepthH2 + H3
Ask AI
ModeFloating
Floating StyleFull Modal
PositionBottom Right
Features