using-docs-kit

Using @lobehub/docs-kit

The consumer repo holds only content + docs.config.ts. The kit owns Vite and React Router config; do not add vite.config.ts or react-router.config.ts unless overriding (see reference/config.md).

lobe-ui itself is the reference consumer: docs.config.ts, docs/, src/*/index.mdx, src/*/demos/.

1. Repo layout

<repo>/
├── docs.config.ts          # defineDocsConfig({...}) — required
├── package.json            # lobedocs scripts
├── docs/
│   ├── index.mdx           # "/" — required (frontmatter feeds SEO even with a custom homePage)
│   ├── changelog.mdx       # "/changelog" — optional; else root CHANGELOG.md is used
│   └── home/home.tsx       # optional custom landing page (config.homePage)
├── src/
│   └── Button/
│       ├── index.ts        # barrel export — <Api> resolves props through it
│       ├── Button.tsx
│       ├── type.ts         # props with JSDoc
│       ├── index.mdx       # -> /components/button
│       └── demos/
│           ├── index.tsx   # default-export component
│           └── Variant.tsx
├── public/                 # static assets served at "/" (favicons, og images)
└── CHANGELOG.md

Hard rules the compiler enforces:

• Only files named index.mdx under an atomDirs root become component pages (index.md and README.md are ignored).
• Demo files must live under src/**/demos/** — standalone /~demos/:id routes and isolated demos are globbed from that path only.
• Other docs/**/*.mdx files are not discovered unless listed in publicDocs.

2. Install and scripts

pnpm add -D @lobehub/docs-kit @react-router/[email protected] [email protected] [email protected] tsx
pnpm add react react-dom # ^19

{
  "scripts": {
    "docs:dev": "lobedocs dev",
    "docs:build": "lobedocs build",
    "postinstall": "lobedocs typegen"
  }
}

lobedocs build writes the static site to dist/ (Pagefind search, sitemap, /llms.txt, /skills.md are generated automatically). Node >= 22.22.