DocsKit

Adding a new doc page

Two steps: create the MDX file and add a nav entry.

1. Create content/docs/your-section/your-page.mdx — no frontmatter needed, the title is read from the first # heading:

# Your Page Title

Content goes here. You can use **Callout**, **Steps**, **Tabs**, and **CodeBlock** components.

2. Add it to src/config/nav.ts:

export const nav: NavGroup[] = [
  {
    title: "Your Section",
    items: [
      { title: "Your Page", href: "/docs/your-section/your-page" },
    ],
  },
];

Colors and theme tokens

All colors are CSS custom properties in src/app/globals.css. The template ships with a purple primary on a near-black dark background. To change the accent color, update --primary in both the :root (dark, default) and [data-theme="light"] blocks:

:root {
  /* dark mode (default) */
  --background: #07070f;
  --foreground: #f3f4f6;
  --primary: #8b5cf6;       /* violet-500 — change to your brand */
  --primary-hover: #7c3aed;
  --muted: #1a1a2e;
  --muted-foreground: #9ca3af;
  --border: #1f1f3a;
  --card: #0f0f1a;
}

[data-theme="light"] {
  --background: #ffffff;
  --foreground: #09090b;
  --muted: #f4f4f5;
  --muted-foreground: #71717a;
  --border: #e4e4e7;
  --primary: #7c3aed;       /* slightly deeper for light mode */
  --primary-hover: #6d28d9;
  --card: #fafafa;
}

MDX components

DocsKit ships four custom MDX components you can use in any .mdx file without importing them:

• <Callout variant="note|warning|tip|danger"> - colored left-border alert boxes
• <Steps><Step title="...">...</Step></Steps> - numbered step sequence
• <Tabs><Tab label="...">...</Tab></Tabs> - tabbed content switcher
• <CodeBlock filename="file.sh"> - syntax-highlighted code with filename tab and copy button

All standard HTML elements (h1-h3, p, ul, table, blockquote, code) are also styled via the component map in src/components/docs/mdx/index.tsx.

Brand and marketing homepage

The marketing homepage at src/app/page.tsx is separate from the docs shell. Edit the hero copy, feature list, and CTA text directly in that file. The site name and metadata are set in src/app/layout.tsx.

Syntax highlighting theme

Code blocks are highlighted by rehype-pretty-code using Shiki. The default theme is one-dark-pro and it is set in src/app/docs/[[...slug]]/page.tsx under the rehypePrettyCode options. Shiki ships with 100+ themes - swap the theme value to any name from the Shiki theme list.

Static export

DocsKit is pre-configured as a static site (output: "export" in next.config.ts). The build produces a standalone out/ folder that works on any static host - no Node.js server required at runtime.

Environment variables

One optional variable controls canonical URL generation:

NEXT_PUBLIC_SITE_URL=https://docs.yourproduct.com

Set this in production so the <link rel="canonical"> tags in your page HTML point to the right domain. It is safe to leave it unset locally.

Deploy to Vercel (recommended)

Push to GitHub, then import at vercel.com/new. Vercel detects Next.js automatically. Set NEXT_PUBLIC_SITE_URL in Project Settings > Environment Variables before your first production deploy.

Deploy to Netlify

Connect your repo in the Netlify dashboard. Set build command to pnpm build and publish directory to out. Add NEXT_PUBLIC_SITE_URL in Site Settings > Environment Variables.

Deploy to Cloudflare Pages / GitHub Pages

Set build command to pnpm build and output directory to out. Because DocsKit uses trailingSlash: true, each page is emitted as page-name/index.html - compatible with virtually every static host without extra rewrite rules.