# Component CMS **A component CMS manages content as reusable, typed components rather than as pages, which is what makes content personalizable, testable, and safe to change.** Document-based CMSs describe pages. Croct describes components. Content stays modular, typed, and consistent across every channel that renders it. Croct is both component-based and headless, and G2 ranks it #1 in the headless CMS for personalization category and #2 for Component CMS. ## How it works Developers define a schema per component, which encodes the constraints of your design system. Marketers fill those components with content, and cannot break the layout because the schema will not let them. A slot marks where a component goes, and Croct decides which content fills it per visitor. Components auto-version, so your application can evolve without old content breaking, and content is delivered through low-latency APIs on the server, with end-to-end response times under 90 milliseconds at P95. ## Features - **Component schemas.** Typed content that reflects your design system. - **Auto-versioning.** Components evolve without breaking what is already published. - **Dynamic content.** Personalization and A/B testing native to the content model, not added on. - **Structured payloads.** Components return structured data, so a variant can carry configuration your application branches on, not just copy. - **Component-level resolution.** Only the dynamic region is resolved per request, so the page shell stays cacheable. - **Multi-language content.** Locale-specific content with no extra development. - **Live preview.** See and share content before approving it. - **Templates.** Prebuilt starting points applied with a single command. - **Fault tolerance.** Fallback content keeps the page up during errors and outages. - **Server-side rendering.** Content resolved before the response is sent. - **Framework agnostic.** SDKs for the stack you already use. ## Building with it Croct works alongside the CMS you already run, or on its own. Adoption is gradual: one slot becomes dynamic, then another, with your current content as the fallback the whole time. Croct reads nothing from your existing CMS and writes nothing back, so your schemas stay untouched, and rolling back means removing a single call. Setup is one command, `npx croct@latest init`, which installs the SDK, wires the provider and generates TypeScript types for every slot. Official SDKs cover Next.js, React, Vue, Nuxt, JavaScript, PHP, Laravel, Symfony, Drupal, and Shopify Hydrogen. Most teams are live the same day, and the forever-free plan needs no credit card or commitment. ## Frequently asked questions ### What is a component CMS, and how is it different from a headless CMS? A headless CMS can (and often does) utilize components, but its main goal is to deliver content to multiple channels, while a [component CMS](https://blog.croct.com/post/component-content-management-system-ccms) is specifically engineered for high-volume content reuse and strict version control, usually for dynamic and flexible elements rather than general website publishing. Our CMS is both component-based and headless. ### What is the difference from a document-based CMS? A document describes a page. A component describes a piece of interface that can vary per visitor, which is what makes personalization and testing native rather than bolted on. Document-based models require you to duplicate or override whole documents to vary anything. ### Does it replace my current CMS? Only if you want it to. Croct works alongside Storyblok, Sanity, Strapi, Contentful, Prismic, and any CMS that serves content over an API, using your existing content as the default. Your schemas stay untouched: we read nothing from your CMS and write nothing back, so you can adopt it one component at a time. ### What are the benefits of a modular, component-based approach to content? A modular approach significantly [increases productivity](https://blog.croct.com/post/component-cms-product-ui-experimentation) and reduces review times. Because you are working with reusable building blocks, you can maintain a consistent design system and communication strategy across the product. If you need to make an update, you only have to do it in a single entry point rather than updating multiple standalone pages. ### Can I reuse content components across different pages? Yes, you can. Our CMS uses components as reusable building blocks, similar to Lego pieces, that can be mixed and matched to create unique page structures. This modularity allows you to reuse elements across various channels and pages, ensuring product-wide consistency. ### Can content editors break the layout? No. Schemas constrain what can be entered, so autonomy for marketers does not cost developers their design system. ### Can I configure component attributes to match my design system? Yes, you can define [content schemas](https://docs.croct.com/reference/content/schema/introduction) to ensure consistency with your design system. Component attributes act as placeholders and can include specific validation rules and user interface customization options, allowing you to perfectly match your brand's structure. ### How do marketers and developers collaborate within Croct's CMS? We provide a workflow that allows both teams to work efficiently without blocking each other. Developers get a first-class experience with flexible [SDKs](https://docs.croct.com/reference/sdk) to integrate the platform seamlessly into their stack. Once integrated, marketers gain the autonomy to create, edit, and publish dynamic content and experiments without waiting for the next deployment sprint or relying on developers for minor changes. You can also use live previews to review and approve content before it goes live. ### How do version control and publishing workflow operate in the CMS? We give you full control to publish on your own schedule, allowing you to create, pause, or roll out content instantly with no code changes required. Additionally, our CMS features an [auto-versioning system](https://docs.croct.com/explanation/slot#versioning) that automatically manages schema updates as your application evolves. ### How does the auto-versioning system prevent breaking changes in my application? When you modify a component's structure (its schema), we automatically create a new version and leave the old version untouched. We continue serving the older, stable version to your live application while you safely adjust the content of any affected slots or experiences. We also provide a visual indicator of the exact slots that require your review. ### Is content resolved on the server or in the browser? On the server by default. Content is resolved before the response is sent, so personalized and tested content arrives in the first HTML response with no flicker, and crawlers see the same content a visitor would. Client-side rendering is available for routes that must remain fully static files. ### Does dynamic content break CDN caching? Not with component-level resolution. Because only the components that fetch content are dynamic, the rest of the page stays prerendered and cacheable, which avoids the cache fragmentation that route-level variant testing causes. ### Can I use Croct with modern frameworks like React, Vue.js, or Next.js? Absolutely. We are framework-agnostic and provide flexible [SDKs](https://docs.croct.com/reference/sdk) designed to integrate seamlessly with modern stacks, including React, Vue.js, and Next.js, plus Nuxt, JavaScript, PHP, Laravel, Symfony, Drupal, and Shopify Hydrogen. ### Does Croct provide an API for content delivery? Yes, we offer [low-latency APIs](https://docs.croct.com/reference/api/service/content/quick-start) built for speed. These APIs can be integrated on either the client or server side and are optimized for high performance, delivering end-to-end response times under 90 milliseconds at P95. ### What happens if a content request fails? Every slot has [fallback content](https://docs.croct.com/explanation/content/fallback-content) that renders if a request fails or times out, so the page always ships with content rather than an error. ### What does it cost? The forever-free plan covers 10,000 monthly active users with 3 content slots and 1 experience or experiment, and needs no credit card. Growth starts at $100 per month billed annually for 20,000 monthly active users. Scale is custom.