@farming-labs/svelte-theme

The Svelte 5 UI layer and theme preset package for @farming-labs/docs on SvelteKit.

It renders the docs shell, page content, sidebar, table of contents, search, AI dialogs, page actions, and theme controls. Content loading and route handlers live in @farming-labs/svelte.

Install

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

The CLI can scaffold the complete SvelteKit 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/svelte-theme";

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

Import the matching shared CSS in src/app.css:

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

Render the docs UI

<script>
  import { DocsLayout } from "@farming-labs/svelte-theme";
  import config from "$lib/docs.config";

  let { data, children } = $props();
</script>

<DocsLayout tree={data.tree} {config}>
  {@render children()}
</DocsLayout>

Use DocsContent from the same package in the page component. The data passed to these components comes from @farming-labs/svelte/server.

Main exports

• DocsLayout, DocsContent, DocsSidebar, and DocsPage
• TableOfContents, Breadcrumb, MobileNav, and ThemeToggle
• SearchDialog, AskAIDialog, and FloatingAIChat
• Callout and theme preset factories

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
• SvelteKit example
• GitHub repository

License

MIT

Optional AI loading

The floating AI trigger loads with the page. Its chat implementation loads on first activation and stays mounted after closing, so reopening keeps the conversation. Panel, modal, popover, full-modal, and custom triggers retain their existing markup and configuration.