---
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"
x_farming_labs_generated_preamble: true
agent:
  tokenBudget: 700
---

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

# Shadcn Theme

Apply the Shadcn preset through `shadcn` from `@farming-labs/theme/shadcn`, `theme: shadcn()`, and `@import "@farming-labs/theme/shadcn/css"` in the global stylesheet.
Expect a 56px header, 288px sidebar, 640px reading column, 256px table of contents, Geist typography, neutral surfaces, and compact controls in light and dark mode.
If the page keeps the default shell, verify that the `/shadcn/css` entrypoint and `shadcn()` factory are both configured.

An unofficial preset modeled on the open-source [shadcn/ui documentation](https://ui.shadcn.com/docs). It recreates the documentation shell and interactions without copying shadcn branding or written 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 a subtle fading divider
- Narrow reading measure and restrained heading scale
- Borderless soft code blocks, callouts, cards, and page actions
- Responsive mobile content with the same typography rhythm

## Customizing

```tsx title="customizing.tsx"
theme: shadcn({
  ui: {
    colors: { primary: "#18181b" },
    layout: { contentWidth: 680, sidebarWidth: 300 },
  },
}),
```

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