CMS-Kit is a production-ready boilerplate from Focus Reactive that builds headless CMS websites on Next.js 15, supporting both Sanity and Storyblok with real-time editing, a shared component library, and one-command Vercel deployment.
What is CMS-Kit?
CMS-Kit is a monorepo boilerplate for creating content-driven websites with Next.js 15 and a headless CMS. It takes a CMS project (Sanity or Storyblok) as input and outputs a deployable website with pre-built UI components, auto-generated TypeScript types, and a hierarchical page structure. The project was created by Focus Reactive to make headless CMS-based development more accessible and fast.
Key Features
Key features include a Next.js 15 foundation, real-time editing, multi-CMS support, type-safe generated types, modern Radix UI components, efficient caching, CSS-variable theming, and an automated setup. The following list details each feature with specifics.
- Next.js 15 foundation — builds on Next.js 15 for performance and SEO-friendly server rendering.
- Real-time editing — edit content in Sanity or Storyblok and see changes live in the frontend.
- Multi-CMS support — includes separate apps for Sanity and Storyblok, plus shared controller components that convert CMS data to common UI props.
- Type-safe development — full TypeScript integration with auto-generated types from CMS schemas using
pnpm gen:types. - Modern UI components — pre-built components using Radix UI in a shared
packages/uilibrary. - Efficient caching — smart caching strategies in the Next.js data layer for optimal performance.
- Theme customization — flexible theming system using CSS variables, with a shared Tailwind config in
packages/tailwind-config. - Automated setup — a Vercel deploy button for Sanity that creates a repository, links the account, and deploys; Storyblok uses an interactive CLI script in
apps/storyblok/CLI.
Who is it for?
CMS-Kit is for developers, agencies, and content teams who want to build a headless CMS website without starting from scratch. It suits those who need a type-safe, well-structured Next.js project that targets either Sanity or Storyblok.
- Next.js developers — get a pre-configured TypeScript and Tailwind project with a component generator (
pnpm gen) for adding sections. - Agencies and freelancers — can maintain a single frontend codebase that serves multiple clients using different CMSs.
- Content editors — benefit from real-time editing, publishing workflows, and change history inside the CMS.
- Technical evaluators — can run the same UI components against Sanity and Storyblok to compare the two platforms.
What can you do with CMS-Kit?
With CMS-Kit you can scaffold, customize, and deploy a content website on either Sanity or Storyblok, and extend it with new sections.
- Launch a Sanity site: click the Vercel deploy button to create a repo, connect a Sanity project, and import demo data with
pnpm import-datasetto get example pages. - Set up a Storyblok site: follow the interactive CLI to create a Space, link Vercel, and configure a deploy hook so global component updates trigger rebuilds.
- Add custom sections: run
pnpm gen, choose UI, Storyblok, or Sanity, then generate types and style the section with margin, background, alignment, and other common properties. - Compare CMS workflows: use the same shared UI package with two different CMS apps to see how content modeling and editing differ.
How does CMS-Kit work?
Setup starts by deploying from the repository template or the Vercel button, then installing dependencies with pnpm. For Sanity, you pull environment variables from Vercel into apps/sanity, import the demo dataset, and run pnpm dev. For Storyblok, you run the CLI in apps/storyblok/CLI, which collects your tokens and configures the space, then you set a VERCEL_REDEPLOY_HOOK_URL environment variable and trigger a rebuild.
FAQ
Does CMS-Kit support Sanity and Storyblok only?
Yes, the current repository contains apps for Sanity and Storyblok. The Payload app was moved to the separate focusreactive/payload-plugins repository, so Payload is no longer part of CMS-Kit.
Can I use CMS-Kit with just one CMS?
Absolutely. The monorepo has separate apps under apps/sanity and apps/storyblok. You can work in just one app and ignore the other, or remove the unused folder entirely.
What commands do I need to generate types for a new section?
After creating a component with pnpm gen, go to the CMS folder (apps/sanity or apps/storyblok) and run pnpm sb-login followed by pnpm gen:types. This generates TypeScript types that reflect your updated CMS schemas.
Does CMS-Kit include Payload?
No. The Payload app has moved to focusreactive/payload-plugins. Only Sanity and Storyblok are integrated in CMS-Kit.
What package manager is required?
CMS-Kit uses pnpm for dependency management and the Turbo build system. The installation command pnpm install is used throughout the setup.
