@farming-labs/astro-theme

The Astro-native UI layer and theme preset package for @farming-labs/docs.

It renders the docs shell, page content, search dialog, AI chat, and theme controls. Content loading and route handlers live in @farming-labs/astro.

Install

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

The CLI can scaffold the complete Astro integration:

npx @farming-labs/docs@latest init

Configure the theme

// src/lib/docs.config.ts
import { defineDocs } from "@farming-labs/docs";
import { fumadocs } from "@farming-labs/astro-theme";

export default defineDocs({
  entry: "docs",
  contentDir: "docs",
  theme: fumadocs(),
  nav: { title: "Docs", url: "/docs" },
});

Render the docs UI

Astro components are exported from component subpaths:

---
import DocsLayout from "@farming-labs/astro-theme/src/components/DocsLayout.astro";
import DocsContent from "@farming-labs/astro-theme/src/components/DocsContent.astro";
import SearchDialog from "@farming-labs/astro-theme/src/components/SearchDialog.astro";
import "@farming-labs/theme/default/css";

import config from "../../lib/docs.config";
import { load } from "../../lib/docs.server";

const data = await load(Astro.url.pathname);
---

<DocsLayout tree={data.tree} config={config}>
  <DocsContent data={data} config={config} />
</DocsLayout>
<SearchDialog config={config} />

The server-side load() function comes from @farming-labs/astro/server.

Themes and components

The package ships DocsLayout, DocsContent, DocsPage, SearchDialog, FloatingAIChat, and ThemeToggle Astro components.

Preset subpaths are fumadocs, pixel-border, darksharp, colorful, greentree, hardline, concrete, command-grid, and ledger. The fumadocs preset uses @farming-labs/theme/default/css; the other presets use the matching @farming-labs/theme/<preset>/css entrypoint.

Learn more

• Documentation
• Themes
• Astro example
• GitHub repository

License

MIT