@farming-labs/theme

The React UI layer and shared theme preset package for @farming-labs/docs.

It provides the docs shell, root providers, MDX components, search and AI interfaces, theme factories, and the CSS used across every Farming Labs framework integration.

Where it fits

• Next.js and TanStack Start: supplies the React layout, providers, components, and CSS
• SvelteKit, Astro, and Nuxt: supplies shared preset CSS while the matching *-theme package supplies framework-native UI components
• @farming-labs/docs: supplies the shared configuration, content features, and CLI

Install

For Next.js:

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

For TanStack Start:

npm install @farming-labs/docs @farming-labs/tanstack-start @farming-labs/theme

The setup CLI installs the correct package set automatically:

npx @farming-labs/docs@latest init

Choose a theme

Use a theme factory in docs.config.ts:

import { defineDocs } from "@farming-labs/docs";
import { fumadocs } from "@farming-labs/theme";

export default defineDocs({
  entry: "docs",
  theme: fumadocs(),
});

Then import its CSS. The default fumadocs() preset uses the default/css entrypoint:

@import "tailwindcss";
@import "@farming-labs/theme/default/css";

Other presets use matching factory and CSS subpaths:

import { hardline } from "@farming-labs/theme/hardline";

@import "@farming-labs/theme/hardline/css";

Available preset subpaths include default, darksharp, pixel-border, colorful, shiny, darkbold, greentree, hardline, concrete, command-grid, ledger, shadcn, and threadline.

The shadcn preset uses a flat desktop table of contents without decorative rails. Active sections use text color; the mobile popover keeps its indented rail and heading navigation.

Main entrypoints

createDocsLayout() prepares navigation and page metadata together, reading each page once per preparation pass. In production, the layout reuses that data across page renders within the same layout instance, including static generation during next build. Content changes are picked up by a new build/process; development renders refresh the data to reflect edits, new pages, and deleted pages. No additional configuration is required.

DocsCommandSearch keeps its keyboard and search-button triggers available on page load. The dialog loads on first use, shows a dismissible loading state, and retains recent searches and cached results across closes. This behavior is shared by Next.js, TanStack Start, and browser-runtime layouts.

Runtime requirements

The package currently declares Next.js 16+, React 19.2+, and React DOM 19.2+ as peers because its root entrypoints provide the React and Next.js UI. SvelteKit, Astro, and Nuxt integrations consume the shared CSS subpaths while rendering UI through their framework-native theme packages.

Learn more

• Themes
• Creating themes
• GitHub repository

License

MIT