Configuration

Customize Docd through app config, Nuxt config, and content metadata.

App Config Reference Nuxt Config Reference

Docd configuration is split across three places:

app/app.config.ts for Docd-specific UI and GitHub behavior
nuxt.config.ts for Nuxt-level options such as site and llms
page frontmatter for per-page metadata such as title, description, and seo

Where configuration lives

`app/app.config.ts`

This is where Docd-specific options live. The layer reads these values from the docd key:

app/app.config.ts

export default defineAppConfig({
  docd: {
    github: {
      repo: "https://github.com/your-org/your-repo",
      branch: "main",
      contentDir: "content",
    },
    ui: {
      header: {
        title: "My Docs",
      },
    },
  },
});

`nuxt.config.ts`

This is where you configure standard Nuxt options that Docd uses as defaults.

nuxt.config.ts

export default defineNuxtConfig({
  extends: ["@baybreezy/docd"],
  site: {
    name: "My Docs",
    url: "https://docs.example.com",
  },
  llms: {
    domain: "https://docs.example.com",
    title: "My Docs",
    description: "Documentation for my project.",
  },
});

Page frontmatter

Per-page values still belong in Markdown frontmatter:

---
title: Configuration
description: Customize Docd through app config, Nuxt config, and content metadata.
navigation:
  icon: lucide:settings
publishedAt: 2026-04-24
modifiedAt: 2026-04-24
seo:
  title: Configuration
  description: Learn which Docd options live in app/app.config.ts, nuxt.config.ts, and page frontmatter.
---

Defaults Docd provides automatically

The layer's config module fills in a few defaults for you.

If you do not provide them explicitly, Docd will try to infer:

site.name from nuxt.config.ts, package.json, or Git metadata
site.url from environment variables such as NUXT_SITE_URL
seo.title, seo.description, and seo.titleTemplate
llms metadata from the detected site name and description
docd.github defaults from local Git information when available

That means you can start small and override only what you actually need.

`docd.github`

This config controls GitHub-aware links in the docs UI, especially the Edit this page link shown in the sidebar extras section.

app/app.config.ts

export default defineAppConfig({
  docd: {
    github: {
      repo: "https://github.com/your-org/your-repo",
      branch: "main",
      contentDir: "content",
    },
  },
});

Fields

Key	Type	Description
`repo`	`string`	Full repository URL.
`branch`	`string`	Branch used to build edit links. Defaults to the current branch when detected.
`contentDir`	`string`	Path to your content directory inside the repository. Defaults to `content`.

If your docs live in a monorepo, set contentDir to the actual path used by the consuming app.

For example, this docs site uses:

apps/docs/app/app.config.ts

export default defineAppConfig({
  docd: {
    github: {
      repo: "https://github.com/BayBreezy/docd",
      branch: "main",
      contentDir: "docs/content",
    },
  },
});

`docd.ui`

The ui section controls the main Docd presentation settings.

app/app.config.ts

export default defineAppConfig({
  docd: {
    ui: {
      header: {
        title: "My Docs",
      },
      toc: {
        title: "On this page",
        icon: "lucide:list",
      },
      borderType: "dashed",
      extraLinks: [],
      transition: {
        name: "fade",
      },
    },
  },
});

`ui.header`

Use this to control the title and logo displayed in the docs header.

app/app.config.ts

export default defineAppConfig({
  docd: {
    ui: {
      header: {
        title: "My Docs",
        hideSearch: false,
        logo: {
          light: "/logo-light.svg",
          dark: "/logo-dark.svg",
          alt: "My Docs Logo",
          classes: "h-8 w-auto",
          url: "/",
        },
      },
    },
  },
});

Available logo fields:

Key	Type	Description
`light`	`string`	Logo URL for light mode.
`dark`	`string`	Logo URL for dark mode.
`alt`	`string`	Alt text for the logo.
`classes`	`string`	Extra CSS classes for the image.
`url`	`string`	Destination when the logo is clicked. Defaults to `/`.
`display`	`"logo"` \| `"wordmark"`	Which logo variant to render in the header. Defaults to `"logo"`.
`favicon`	`string`	Optional URL for a custom favicon. Defaults to `/favicon.ico`.
`brandAssetsUrl`	`string`	URL to a page or folder containing brand assets.
`wordmark`	`DocLogoWordmarkConfig`	Optional wordmark configuration.

`ui.footer`

Use this to control what is shown in the sidebar footer area.

app/app.config.ts

export default defineAppConfig({
  docd: {
    ui: {
      footer: {
        hideThemeCustomizer: false,
        hideLightDarkToggle: false,
      },
    },
  },
});

Key	Type	Description
`hideThemeCustomizer`	`boolean`	Hides the theme customizer in the sidebar footer. Defaults to `false`.
`hideLightDarkToggle`	`boolean`	Hides the light/dark mode toggle in the sidebar footer. Defaults to `false`.

`ui.toc`

This controls the title and icon shown above the page table of contents.

app/app.config.ts

export default defineAppConfig({
  docd: {
    ui: {
      toc: {
        title: "On this page",
        icon: "lucide:list",
      },
    },
  },
});

`ui.borderType`

Docd uses decorative borders and rails across several parts of the interface.

app/app.config.ts

export default defineAppConfig({
  docd: {
    ui: {
      borderType: "solid",
    },
  },
});

Supported values:

"dashed"
"solid"

`ui.extraLinks`

These links are rendered in the sidebar’s extra links area alongside the generated Edit this page link.

app/app.config.ts

export default defineAppConfig({
  docd: {
    ui: {
      extraLinks: [
        {
          icon: "lucide:star",
          label: "Star on GitHub",
          href: "https://github.com/your-org/your-repo",
          external: true,
        },
      ],
    },
  },
});

Each link supports:

Key	Type	Description
`label`	`string`	Link label shown in the UI.
`href`	`string`	Internal or external URL.
`icon`	`string`	Optional icon name.
`external`	`boolean`	Opens the link in a new tab when `true`.

`ui.colorMode`

Docd can also set the site color mode through app config.

Setting this value will force the entire site into the specified mode.

app/app.config.ts

export default defineAppConfig({
  docd: {
    ui: {
      colorMode: "dark", // forces dark mode across the site
    },
  },
});

Supported values:

"light"
"dark"

`ui.transition`

This controls page transition behavior for docs navigation.

app/app.config.ts

export default defineAppConfig({
  docd: {
    ui: {
      transition: {
        name: "fade",
        duration: 0.35,
        easing: "easeOut",
      },
    },
  },
});

Supported transition names:

fade
rightToLeft
leftToRight
upToDown
downToUp
rightToLeftWithFade
leftToRightWithFade
zoom
zoomOut
cupertino
cupertinoDialog
none

SEO Configuration

Docd also reads from the top-level seo app config.

app/app.config.ts

export default defineAppConfig({
  seo: {
    title: "My Docs",
    description: "Documentation for my project.",
  },
});

If you do not provide these values, Docd will generate sensible defaults from your site name and package metadata.

Per-page SEO overrides still belong in Markdown frontmatter:

seo:
  title: Custom Page Title
  description: Custom page description.

`site` configuration

Docd relies on Nuxt SEO Site Config for canonical URLs and site metadata.

nuxt.config.ts

export default defineNuxtConfig({
  site: {
    name: "My Docs",
    url: "https://docs.example.com",
  },
});

This is especially important for:

canonical URLs
OG metadata
structured data
sitemap generation

`llms` configuration

Docd already includes nuxt-llms, so you can customize the generated LLM text files in nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  llms: {
    domain: "https://docs.example.com",
    title: "My Docs",
    description: "Documentation for my project.",
    full: {
      title: "My Docs",
      description: "Documentation for my project.",
    },
  },
});

If omitted, these values are inferred from your site and package metadata.

A practical example

This docs site uses configuration in roughly this shape:

app/app.config.ts

const repoBase = "https://github.com/BayBreezy/docd";

export default defineAppConfig({
  docd: {
    github: {
      repo: repoBase,
      branch: "main",
      contentDir: "docs/content",
    },
    ui: {
      borderType: "dashed",
      header: {
        title: "Docd",
      },
      extraLinks: [
        { icon: "lucide:star", label: "Star on GitHub", href: repoBase, external: true },
      ],
      transition: {
        name: "fade",
      },
    },
  },
});

Rule of thumb

Use:

app/app.config.ts for Docd UI behavior
nuxt.config.ts for Nuxt/site/LLMs config
page frontmatter for page-level metadata

That split keeps configuration predictable and makes it easier to understand where a given behavior comes from.

Editing

Learn how to write and organize documentation content with Docd.

Theme

Customize the look and feel of Docd with UI Thing components, Tailwind CSS v4, and CSS variables.