v0.0.1
v0.0.2-beta.1
v0.0.2-beta.2
v0.0.2-beta.3

a documentation
that just works.

A modern MDX documentation framework for Next.js. One config file, zero boilerplate.

Get Started
GET THE GITHUB
Quick Start

Up and running in minutes

1

Install

Add the core packages to your Next.js project.

shell
Terminal
pnpm add @farming-labs/docs @farming-labs/fumadocs @farming-labs/next
2

Configure

One file. Theme, metadata, components, icons — everything.

docs.config.tsx
Config
import { defineDocs } from "@farming-labs/docs";
import { pixelBorder } from "@farming-labs/fumadocs/pixel-border";

export default defineDocs({
  entry: "docs",
  theme: pixelBorder(),
  metadata: {
    titleTemplate: "%s – My Docs",
  },
});
3

Write docs

Create MDX files under app/docs/. That's it.

app/docs/getting-started/page.mdx
MDX Page
---
title: "Getting Started"
description: "Set up in 5 minutes"
icon: "rocket"
---

# Getting Started

Write your content in **MDX** with
frontmatter for metadata.

```ts title="auth.ts"
export const auth = betterAuth({
  database: { provider: "postgresql" },
});
```
4

Ship

No layout files. No wrappers. The framework handles everything.

next.config.ts
Next Config
import { withDocs } from "@farming-labs/next/config";

export default withDocs({});

// That's it. Routing, MDX, search — all handled.
Themes

More themes. Your choice.

Pick a preset or build your own with createTheme(). Override any styles from config.

Default

Clean, neutral palette with standard border radius

@import "@farming-labs/fumadocs/default/css";

Darksharp

All-black, sharp corners, no rounded edges

@import "@farming-labs/fumadocs/darksharp/css";

Pixel Border

Inspired by better-auth.com — refined dark UI

@import "@farming-labs/fumadocs/pixel-border/css";
docs.config.tsx
Custom Colors
theme: pixelBorder({
  ui: {
    colors: {
      primary: "oklch(0.72 0.19 149)",     // green
      accent: "hsl(220 80% 60%)",          // blue
    },
  },
}),
Configuration

One file. Full control.

docs.config.tsx
Full Example
import { defineDocs } from "@farming-labs/docs";
import { pixelBorder } from "@farming-labs/fumadocs/pixel-border";
import { Rocket, BookOpen, Code } from "lucide-react";

export default defineDocs({
  entry: "docs",
  theme: pixelBorder({
    ui: {
      colors: { primary: "oklch(0.72 0.19 149)" },
      typography: {
        font: {
          h1: { size: "2.25rem", weight: 700 },
          body: { size: "0.975rem", lineHeight: "1.8" },
        },
      },
    },
  }),

  nav: {
    title: <div style={{ display: "flex", gap: 8 }}>
      <Rocket size={14} /> My Docs
    </div>,
  },

  icons: {
    rocket: <Rocket size={16} />,
    book: <BookOpen size={16} />,
    code: <Code size={16} />,
  },

  components: { MyCustomCallout },

  breadcrumb: { enabled: true },
  themeToggle: { enabled: false, default: "dark" },

  pageActions: {
    copyMarkdown: { enabled: true },
    openDocs: {
      enabled: true,
      providers: [
        { name: "ChatGPT", urlTemplate: "https://chatgpt.com/?q={url}" },
      ],
    },
  },

  metadata: {
    titleTemplate: "%s – Docs",
    description: "My documentation site",
  },
});