---
title: "Shadcn"
description: "Compact neutral theme matching the layout, typography, and controls of the shadcn/ui documentation"
canonical_url: "https://docs.farming-labs.dev/docs/themes/shadcn"
markdown_url: "https://docs.farming-labs.dev/docs/themes/shadcn.md"
last_updated: "2018-10-20"
agent:
  tokenBudget: 700
---

# Shadcn Theme
URL: /docs/themes/shadcn
LLM index: /llms.txt
Description: Compact neutral theme matching the layout, typography, and controls of the shadcn/ui documentation
Related: /docs/themes, /docs/themes/threadline, /docs/customization/colors, /docs/themes/creating-themes

Apply via `shadcn` from `@farming-labs/theme/shadcn`, `theme: shadcn()`, and `@import "@farming-labs/theme/shadcn/css"` in global stylesheet. Expect 56px header, 288px sidebar, 640px reading column, 256px TOC, Geist typography, neutral surfaces, compact controls in light/dark mode. Verify `/shadcn/css` entrypoint and `shadcn()` factory are both configured.

Unofficial preset modeled on [shadcn/ui documentation](https://ui.shadcn.com/docs); recreates the shell and interactions without copying branding or content.

## Usage

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

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

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

## Defaults

| Property | Value |
| --- | --- |
| Primary | Neutral black / white |
| Background | White (light), neutral near-black (dark) |
| Border radius | `0.625rem` |
| Content width | 640px |
| Sidebar width | 288px |
| TOC width | 256px |
| Header height | 56px |

## Style Notes

- Compact desktop navigation and quiet search controls
- Rounded active sidebar rows with subtle fading divider
- Narrow reading measure and restrained heading scale
- Borderless soft code blocks, callouts, cards, and page actions

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