DDocsKit/Docs

Type to search. Run pnpm build to enable in dev mode.

↑↓navigate↵openescclose

Introduction

DocsKit is a production-ready Next.js documentation template for developers who need great docs without spending weeks building a docs site from scratch.

It ships with a full marketing homepage, a structured docs section, full-text search, syntax-highlighted code blocks, and a dark violet design system - all as a single static export you can deploy anywhere.

What problem does it solve?

Most documentation tooling forces you into one of two bad positions: use a heavyweight platform with limited customization (Gitbook, Confluence), or spend two weeks hand-rolling a docs site before you can write a single word of actual documentation.

DocsKit is the middle path. You get a complete, polished docs site on day one - and because it's plain Next.js and MDX, you can customize every pixel without fighting a framework.

Feature overview

FeatureDescription
MDX contentWrite in Markdown with React components embedded anywhere
Full-text searchPowered by Pagefind - zero server cost, indexes at build time
Syntax highlightingShiki-based with filename tabs and one-click copy button
Responsive layoutLeft sidebar navigation + right-side table of contents
Dark violet designOpinionated, consistent color system based on CSS variables
Marketing homepageA real landing page to promote your product
Static exportDeploys to Vercel, Netlify, Cloudflare Pages, or any host
TypeScript configType-safe nav configuration - no YAML or JSON to manage
Accessible componentsARIA roles on tabs, callouts, and step indicators
TOC auto-generationRight sidebar TOC is built from your heading structure

Architecture overview

DocsKit is a Next.js application that uses output: "export" to produce a fully static site.

packages/docskit/
  content/
    docs/              # Your MDX source files live here
      getting-started/
      configuration/
      components/
      api-reference/
  src/
    app/
      page.tsx         # Marketing homepage
      docs/
        [[...slug]]/   # Catch-all route for all doc pages
          page.tsx
    components/
      docs/
        mdx/           # Callout, CodeBlock, Steps, Tabs
    config/
      nav.ts           # Sidebar navigation config
    lib/
      mdx.ts           # MDX compilation + frontmatter parsing
  out/                 # Generated static site (after build)

At build time, Next.js reads every MDX file in content/docs/, compiles it with next-mdx-remote, and emits a static HTML page. Pagefind then crawls the out/ directory to build the search index - that's why search only works after a production build.

Why DocsKit?

You own the code. There's no hosted platform, no vendor lock-in, and no monthly bill. Once you purchase the template, the code is yours to deploy, fork, and modify without restriction.

Static means fast. Because DocsKit generates plain HTML, your docs load instantly from a CDN. There are no database queries, no server-side rendering, and no cold starts. Lighthouse scores in the high 90s are the baseline, not an aspiration.

MDX is the right format. Pure Markdown is too limited for real documentation (no interactive examples, no custom warnings, no tabbed code blocks). MDX gives you Markdown speed with React power - you can embed any component anywhere in your content.

The design system is complete. Every color, spacing, and typography decision is expressed as a CSS custom property. Changing the accent color from violet to your brand color is a one-line edit. The design holds together at every breakpoint.

The search is real. Pagefind indexes your full content at build time and ships the search index alongside your static files. The search UI is already integrated - no Algolia account, no API key, no rate limits.

DocsKit includes a marketing homepage at the root (/) that you can use to promote your product before linking visitors to /docs. The homepage, hero section, and feature grid are all customizable in src/app/page.tsx.

Next steps

Start with the installation guide, then follow the quick start to have your own docs live in under 15 minutes.