Shadcn ThemeCopy Anchor Link

An unofficial preset modeled on the open-source shadcn/ui documentation. It recreates the documentation shell and interactions without copying shadcn branding or written content.

UsageCopy Anchor Link

import { defineDocs } from "@farming-labs/docs";
import { shadcn } from "@farming-labs/theme/shadcn";

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

@import "tailwindcss";
@import "@farming-labs/theme/shadcn/css";

DefaultsCopy Anchor Link

Passing the theme to withDocs()Copy Anchor Link

To apply the shadcn syntax-highlighting themes during the Next.js build, pass the imported theme config to withDocs():

import { withDocs } from "@farming-labs/next/config";
import docsConfig from "./docs.config";

export default withDocs({}, { theme: docsConfig.theme });

Without this, withDocs() falls back to github-light-default / vesper automatically when it detects @farming-labs/theme/shadcn in your docs.config file, so the correct themes are used either way.

Style NotesCopy Anchor Link

• Compact desktop navigation and quiet search controls

• Rounded active sidebar rows with a subtle fading divider

• Fading vertical divider on the desktop sidebar rail — a 1 px gradient line that fades to transparent at the top and bottom edges

• Compact navigation-rail padding and a masked scroll-area viewport that softly fades content at the scroll boundaries

• Narrow reading measure and restrained heading scale

• Borderless soft code blocks, callouts, cards, and page actions

• Responsive mobile content with the same typography rhythm

CustomizingCopy Anchor Link

theme: shadcn({
  ui: {
    colors: { primary: "#18181b" },
    layout: { contentWidth: 680, sidebarWidth: 300 },
  },
}),