{"id":22728095,"url":"https://github.com/focusreactive/cms-kit","last_synced_at":"2026-05-04T09:03:15.352Z","repository":{"id":248132312,"uuid":"826312493","full_name":"focusreactive/cms-kit","owner":"focusreactive","description":"The project serves the idea of making Headless CMS-based development accessible, comfortable, and fast.","archived":false,"fork":false,"pushed_at":"2026-05-01T09:41:12.000Z","size":17152,"stargazers_count":18,"open_issues_count":23,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-05-01T11:32:58.359Z","etag":null,"topics":["headless-cms","sanity","storyblok"],"latest_commit_sha":null,"homepage":"https://turbo-cms-kit-storyblok.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/focusreactive.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-07-09T13:14:22.000Z","updated_at":"2026-05-01T09:41:14.000Z","dependencies_parsed_at":"2024-08-01T11:32:45.921Z","dependency_job_id":"462ea98a-5049-4124-b613-d8b87a48c2eb","html_url":"https://github.com/focusreactive/cms-kit","commit_stats":null,"previous_names":["alexhramovich/turbo-cms-kit","focusreactive/turbo-cms-kit","focusreactive/cms-kit"],"tags_count":21,"template":true,"template_full_name":null,"purl":"pkg:github/focusreactive/cms-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focusreactive%2Fcms-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focusreactive%2Fcms-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focusreactive%2Fcms-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focusreactive%2Fcms-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/focusreactive","download_url":"https://codeload.github.com/focusreactive/cms-kit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focusreactive%2Fcms-kit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32600968,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T22:12:39.696Z","status":"online","status_checked_at":"2026-05-04T02:00:06.625Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["headless-cms","sanity","storyblok"],"created_at":"2024-12-10T17:14:36.084Z","updated_at":"2026-05-04T09:03:15.339Z","avatar_url":"https://github.com/focusreactive.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CMS-Kit 🔧🔧🔧\n\nThis production ready boilerplate accumulating the experience and best practices collected at [Focus Reactive](https://focusreactive.com/). The project serves the idea of making Headless CMS-based development accessible, comfortable, and fast.\n\n## Features\n\n- **Next.js 15 for performance:** Leverage the power of Next.js 15 for performance and SEO-friendly sites\n- **Real-time editing:** Edit content and see changes live, creating dynamic experience\n- **User-friendly interface:** Reduce friction for your team when working with the content\n- **Advanced content management:** Collaborate with your team in real-time using publishing workflows and changes history\n- **Instant publishing:** Make content live instantaneous without delays\n- **Multi-CMS support:** Seamlessly switch between different headless CMS platforms\n- **Type-safe development:** Full TypeScript integration with auto-generated types\n- **Modern UI components:** Pre-built components using Radix UI for consistent design\n- **Efficient caching:** Smart caching strategies for optimal performance\n- **Theme customization:** Flexible theming system using CSS variables\n- **Automated setup:** One-command initialization script that handles CMS platform integration, account linking, and Vercel deployment\n\n## Demo 👀\n\n**Production website**\n\n![CMS-Kit website core web vitals score](https://cdn.sanity.io/images/vftxng62/production/67581c7101b3bc70504f0b827fdb39e18e82ccf9-454x101.png)\n\n- [Sanity](https://turbo-cms-kit-sanity.vercel.app/)\n- [Storyblok](https://turbo-cms-kit-storyblok.vercel.app/)\n- Payload (self-hosted, requires PostgreSQL)\n\n**Editing experience**\n- Sanity\n\n![sanity-demo](https://github.com/user-attachments/assets/5e3e9be3-f78d-4f1e-8b0c-5226e4cf3371)\n\n## Getting Started\n\n### Prerequisites\n\n- Make sure your Github account is linked to Vercel account. You can do it [here](https://github.com/settings/installations).\n- Make sure pnpm package manages is [installed](https://pnpm.io/installation).\n\n### Sanity\n\n1. *Create Github repository, create Sanity project, deploy to Vercel*\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Ffocusreactive%2Fcms-kit\u0026project-name=sanity-cms-kit\u0026repository-name=sanity-cms-kit\u0026integration-ids=oac_hb2LITYajhRQ0i4QznmKH7gx\u0026build-command=cd%20../../%20%26%26%20turbo%20run%20build%20--filter%3Dsanity\u0026install-command=pnpm%20i\u0026root-directory=apps/sanity\u0026production-deploy-hook=trigger%20rebuild\u0026demo-title=CMS-Kit%3A%20Sanity%20%2B%20Next.js%2015%20visual%20site%20builder\u0026demo-description=Production%20ready%20boilerplate%20serves%20the%20idea%20of%20making%20Headless%20CMS-based%20development%20accessible%2C%20comfortable%2C%20and%20fast.\u0026demo-url=https%3A%2F%2Fturbo-cms-kit-sanity.vercel.app%2F\u0026demo-image=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fvftxng62%2Fproduction%2Fa6364de57a7566685ad87e201eb1fe99c89f1677-1200x630.png)\n\n2. *Clone project locally*\n\n- Navigate to your Github account and clone project repository locally.\n- Navigate to project folder.\n```shell\ncd \u003cproject folder\u003e\n```\n- Install dependencies\n```shell\npnpm install\n```\n\n3. *Pull required ENV variables*\n\nExecute following command to pull ENV variables from Vercel and replace some of the with local development values\n\n```shell\npnpm vercel link \u0026\u0026\npnpm vercel env pull \u0026\u0026\nmv .env.local apps/sanity/\n```\n\n4. *Import templates and example pages data*\n\n```shell\ncd apps/sanity \u0026\u0026 pnpm import-dataset\n```\n\n5. *Run project locally*\n\n```shell\npnpm dev\n```\n\n### Storyblok\n\n[Sanity CMS Overview](https://focusreactive.com/storyblok-cms-overview/)\n\n1. Create a new repository using this template by clicking the \"Use this template\" button at the top of the repository page.\n\n   ![Screenshot 2024-11-07 at 13 38 48](https://github.com/user-attachments/assets/9a159ebd-d810-4b6d-ab79-ab453da6ab9c)\n\n2. Await the initial workflow to be finished\n\n![Screenshot 2024-11-07 at 16 00 17](https://github.com/user-attachments/assets/375ce843-8185-4782-95ff-5f9d6aaf2935)\n\n3. Clone your new repository:\n\n   ```bash\n   git clone \u003cyour-repository-url\u003e\n   ```\n\n4. Navigate to the project directory:\n\n   ```bash\n   cd \u003crepository-name\u003e\n   ```\n\n5. Install dependencies using pnpm:\n\n   ```bash\n   pnpm install\n   ```\n\n6. Navigate to the Storyblok CLI directory:\n\n   ```bash\n   cd apps/storyblok/CLI\n   ```\n\n7. Run the setup script,\n\n⚠️ command should be executed from _apps/storyblok/CLI_ (previous step), to consume correct environment variables:\n\n```bash\n   node sb.mjs\n```\n\n8. Follow the interactive prompts in the CLI tool to:\n\n   - Enter your Storyblok Personal Access Token\n   - Enter your Vercel Personal Auth Token\n   - Select your Vercel team\n   - Choose a project name\n   - Complete the space creation and configuration process\n\n9. Go to project settings in Vercel dashboard\n   - select **Git** section\n   - create deploy hook and copy it\n   - select **Environment variables** section\n   - add variables called **VERCEL_REDEPLOY_HOOK_URL** and assign it to created deploy hook value\n   - trigger rebuild\n\nThis process ensures that global component updates are displayed on all pages.\n\n🏁 Your CMS-based project is ready 🏁\n\n### Payload\n\nPayload CMS with PostgreSQL, multi-tenancy, i18n, and A/B testing.\n\n**Prerequisites:**\n- Docker (for PostgreSQL)\n- Node.js ≥20, pnpm ≥9\n\n**Setup:**\n\n1. Start PostgreSQL:\n```bash\ncd apps/payload\ndocker-compose up -d\n```\n\n2. Copy and fill environment variables:\n```bash\ncp apps/payload/.env.local.example apps/payload/.env.local\n```\n\nRequired env vars:\n```bash\nDATABASE_URI=\"postgresql://postgres:password@localhost:5432/payload\"\nPAYLOAD_SECRET=\"your-secret-key\"\nNEXT_PUBLIC_SERVER_URL=\"http://localhost:3000\"\n# Auth0 (optional, for admin auth):\nAUTH0_SECRET=\"...\"\nAUTH0_BASE_URL=\"http://localhost:3000\"\nAUTH0_ISSUER_BASE_URL=\"https://your-tenant.auth0.com\"\nAUTH0_CLIENT_ID=\"...\"\nAUTH0_CLIENT_SECRET=\"...\"\n```\n\n3. Run migrations and generate types:\n```bash\npnpm --filter payload payload migrate\npnpm --filter payload generate:types\npnpm --filter payload generate:importmap\n```\n\n4. Start dev server:\n```bash\npnpm --filter payload dev\n# or from monorepo root:\nturbo dev --filter=payload\n```\n\nAdmin panel: `http://localhost:3000/admin`\n\n**Migrations:**\n```bash\npnpm --filter payload payload migrate:create  # create new migration\npnpm --filter payload payload migrate          # run pending migrations\n```\n\n---\n\n## Repo structure\n\n- `apps/payload`: CMS app (Payload CMS + PostgreSQL)\n- `apps/storyblok`: CMS app\n- `apps/sanity`: CMS app\n- `packages/ui`: UI components library, shared between both CMS apps\n- `packages/eslint-config`: shared `eslint` configurations\n- `packages/ts-config`: shared `ts-config` configuration\n- `packages/tailwind-config`: shared `tailwind` configuration\n\n### Types of components\n\n- **UI component** - universal and sharable component between multiple CMSs\n- **Controller component** - takes data from CMS, convert it to UI component format, and use UI component with converted props. Each CMS has it's own controller component for each UI component.\n- All **controller components** have common propertiers to change style, such as margin, background, alignment etc.\n\n### Components composition and hierarchy\n\nThe website structure follows a clear hierarchical composition:\n\n1. Pages\n\n   - Top-level components that represent entire web pages\n   - Each page contains multiple sections, SEO properties and theme\n\n2. Sections\n\n   - Container components that organize content into distinct areas\n   - Can be configured with settings like margin, background, width, alignment etc.\n   - Hold and arrange other components\n\n3. Base Components\n\n   - Components like **link**, **image**, and **rich text**\n   - Combination of multiple functional components like **card**\n   - Can be combined and reused across different sections\n\n**RichText** component has additional functionality. It allows to add sections inside, which gives ability to combine sections with text.\n\n### Add new section\n\n1. Create new component using generators\n\n```bash\npnpm gen\n```\n\n2. Select type of component to create\n\n```bash\n- UI: Create a new UI component\n- Storyblok: Create a new content section\n- Sanity: Create a new content section\n```\n\n3. Enter name of the component\n4. For Storyblok, add section component to the CMS\n5. Update properties and design\n6. Go to CMS folder\n\n```bash\ncd apps/storyblok\n```\n\nor\n\n```bash\ncd apps/sanity\n```\n\n7. Generate types for added section\n\n```bash\npnpm sb-login\n\npnpm gen:types\n```\n\n### Update existing section\n\n1. Updata design\n2. Update fields\n3. Go to CMS folder\n\n```bash\ncd apps/storyblok\n```\n\nor\n\n```bash\ncd apps/sanity\n```\n\n4. Generate types for updated section\n\n```bash\npnpm gen:types\n```\n\n## Start project in dev mode\n\n### Instalation\n\n1. Clone repository\n   ```bash\n   git clone https://github.com/focusreactive/cms-kit\n   ```\n2. Go to project directory\n   ```bash\n   cd cms-kit\n   ```\n3. Install dependencies\n   ```bash\n   pnpm install\n   ```\n4. Add and fill `.env` and `.env.local` file with proper data:\n\nCreate `.env` and `.env.local` files in project folder (apps/sanity or apps/storyblok) and add the following variables:\n\n.env\n\n```bash\nREPO_PROD_BRANCH=\"main\"\nREPO_TYPE=\"github\"\nREPO_ID=\"[repo id]\"\nREPO_NAME=\"[nickname]/[repo name]\"\n```\n\n**Storyblok project**\n\n.env.local\n\n```bash\nNEXT_PUBLIC_DOMAIN=\"https://localhost:4050\"\nNEXT_PUBLIC_IS_PREVIEW=\"true\"\nNEXT_PUBLIC_STORYBLOK_TOKEN=\"[storyblok space preview token]\"\nNEXT_PUBLIC_STORYBLOK_API_GATE=\"https://api.storyblok.com/v2/cdn\"\n```\n\n**Sanity project**\n\n.env.local\n\n```bash\nNEXT_PUBLIC_BASE_URL=\"http://localhost:3000\"\nNEXT_PUBLIC_SANITY_PROJECT_ID=\"[project id]\"\nNEXT_PUBLIC_SANITY_DATASET=\"production\"\nSANITY_API_READ_TOKEN=\"[read token]\"\n```\n\n5. Run dev server\n   ```bash\n   pnpm dev\n   ```\n\nHappy hacking 👾\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffocusreactive%2Fcms-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffocusreactive%2Fcms-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffocusreactive%2Fcms-kit/lists"}