Home /

docs

Threadline Theme

A compact neutral preset for chat, agent, and product documentation. It uses a 48px header, compact Geist typography, muted shadcn surfaces, and ghost-style page actions for dense, readable docs.

Usage

docs.config.ts
import { defineDocs } from "@farming-labs/docs";
import { threadline, threadlinePageActions } from "@farming-labs/theme/threadline";

export default defineDocs({
  entry: "docs",
  theme: threadline(),
  github: {
    url: "https://github.com/acme/docs",
  },
  pageActions: threadlinePageActions,
});
app/global.css
@import "tailwindcss";
@import "@farming-labs/theme/threadline/css";

Page Actions

threadlinePageActions enables:

  • Copy page
  • Open in GitHub
  • Open in ChatGPT
  • Open in Claude
  • Open in Cursor
  • Open in T3 Chat

The GitHub action needs top-level github config so the theme can resolve {githubUrl} for the current page.

Defaults

PropertyValue
Primaryoklch(0.205 0 0)
Backgroundoklch(1 0 0) (light), oklch(0.145 0 0) (dark)
Borderoklch(0.922 0 0)
Border radius0.625rem
Content width944px
Sidebar width260px
TOC width224px
Header height48px

Style Notes

  • Geist-first typography with smaller headings and dense prose
  • Transparent sidebar with soft hover and active states
  • Muted cards, tables, inline code, and code blocks
  • Blue documentation links and info callouts on an otherwise neutral shell
  • Ghost-style page-action buttons with a compact Open in menu

Customizing

customizing.tsx
theme: threadline({
  ui: {
    colors: { primary: "#111827" },
    layout: { sidebarWidth: 280, tocWidth: 240 },
  },
}),