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 },
  },
}),
Customize
Live preview on these docs
Reset
Customize
Export Code
Preset
Explore more themes
Primary Color
Primary
Colors
Background
Foreground
Muted Text
Border
Card
Muted BG
Ring
Layout
SidebarBordered
TOC StyleDirectional (tree)
TOC DepthH2 + H3
Ask AI
ModeFloating
Floating StyleFull Modal
PositionBottom Right
Features