DEV Community

TheKitBase
TheKitBase

Posted on Originally published at thekitbase.app

I Open-Sourced the Engine Behind One of My Paid Next.js Templates

#nextjs #opensource #a11y #webdev

I sell Next.js templates for a living, which made this a slightly odd decision: I just gave away a real, complete piece of one of them for free.

DocsKit is a documentation-site template I sell for $39. A few weeks ago I pulled out everything that makes it a genuinely usable docs site on its own - MDX rendering with real components, dark and light mode, a sidebar and table-of-contents layout - and published it as DocsKit Free, MIT licensed, on GitHub.

Why give part of it away

The honest answer: because it split cleanly. A docs site has a natural line in it that a lot of other template types don't. The engine - rendering MDX, navigating between pages, looking right in dark mode - is infrastructure. The polish - syntax-highlighted code blocks, full-text search, a marketing homepage to sell the thing - is what people are actually paying for.

So the free version isn't a crippled trial with a paywall bolted on. It's the real engine. You can clone it, deploy it, and have a working documentation site in about five minutes. What you don't get is Shiki syntax highlighting, Pagefind search, the marketing homepage, and the deeper config/API reference sections - those stayed in the paid version, and the README says so directly rather than making you find out by hitting a wall.

What's actually in it

  • MDX content with Callout, CodeBlock, Steps, and Tabs components
  • Sidebar navigation and an auto-generated table of contents
  • Dark and light mode, no flash on load
  • Static export - deploy to Vercel, Netlify, Cloudflare Pages, or any static host
  • TypeScript strict, no YAML/JSON config file to fight with

One thing I didn't expect to end up caring about

While I was auditing accessibility across my whole paid catalog, I ran the same check against this free one. It's now WCAG 2.2 AA audited in both themes, at desktop and phone widths, with the check itself shipped in the repo (npm run test:a11y) so it doesn't just pass once and silently rot the next time someone edits it.

Try it

If you use it for something, I'd genuinely like to see it - reply here or find me on X.

Top comments (0)