CMS-Kit

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/ui library.
• 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-dataset to 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.