Home /

docs

Command Grid Theme

A mono-first preset with a paper-grid light mode, lead-toned dark mode, sharper borders, and calmer surfaces inspired by the better-cmdk landing page.

Usage

docs.config.ts
import { defineDocs } from "@farming-labs/docs";
import { commandGrid } from "@farming-labs/theme/command-grid";

export default defineDocs({
  entry: "docs",
  theme: commandGrid(),
});
app/global.css
@import "tailwindcss";
@import "@farming-labs/theme/command-grid/css";

Defaults

PropertyValue
Primary#141414
Background#f8f6ed (light), #121212 (dark)
Border radius0px
Content width900px
Sidebar width304px

Style Notes

  • Mono-first typography across the sidebar, TOC, and command surfaces
  • Paper-grid background in light mode with a quieter dark-mode grid
  • Sharper tables, callouts, search UI, and Ask AI surfaces
  • Better-cmdk-inspired light/dark palette without the heavier concrete shadow treatment

Customizing

customizing.tsx
theme: commandGrid({
  ui: {
    colors: { accent: "#d9c9b4" },
    layout: { sidebarWidth: 320 },
  },
}),
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