---
title: "Command Grid"
description: "Mono-first paper-grid theme inspired by the better-cmdk landing page"
canonical_url: "https://docs.farming-labs.dev/docs/themes/command-grid"
markdown_url: "https://docs.farming-labs.dev/docs/themes/command-grid.md"
last_updated: "2018-10-20"
agent:
  tokenBudget: 750
---

# Command Grid
URL: /docs/themes/command-grid
LLM index: /llms.txt
Description: Mono-first paper-grid theme inspired by the better-cmdk landing page
Related: /docs/themes, /docs/customization/colors, /docs/customization/typography, /docs/themes/creating-themes

# Command Grid Theme

Choose Command Grid by importing `commandGrid` from `@farming-labs/theme/command-grid`, calling `commandGrid()` in the `theme` field, and loading `@farming-labs/theme/command-grid/css` globally.
Verify the paper-grid light background, mono-first UI, `0px` radius, 900px content area, and 304px sidebar; customize only the shown `ui.colors.accent` or `ui.layout.sidebarWidth` when answering from this page.
A plain ungridded result usually means the `/command-grid/css` entrypoint is missing or paired with a different factory.

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

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

export default defineDocs({
  entry: "docs",
  theme: commandGrid(),
});
```

```css title="app/global.css"
@import "tailwindcss";
@import "@farming-labs/theme/command-grid/css";
```

## Defaults

| Property      | Value                               |
| ------------- | ----------------------------------- |
| Primary       | `#141414`                           |
| Background    | `#f8f6ed` (light), `#121212` (dark) |
| Border radius | `0px`                               |
| Content width | 900px                               |
| Sidebar width | 304px                               |

## 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

```tsx title="customizing.tsx"
theme: commandGrid({
  ui: {
    colors: { accent: "#d9c9b4" },
    layout: { sidebarWidth: 320 },
  },
}),
```

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.
Docs-scoped sitemap: [/docs/sitemap.md](/docs/sitemap.md).
Well-known sitemap: [/.well-known/sitemap.md](/.well-known/sitemap.md).