CMS-powered Magic UI components

NewsBy Juliana Amorim

If you're using Magic UI, a growing React UI component library with over 16,000 GitHub stars, you already know how fast it makes front-end development. However, even the best UI components may be limited if they don't have dynamic content and personalization.

That’s why we launched Croct templates for Magic UI: a one-click integration of CMS-powered components that support personalization and AB testing from day one. No setup, no wiring. Just plug and play.

Grid showing Croct templates for CMS-powered Magic UI components
Croct templates for CMS-powered Magic UI components

Why use Croct templates with Magic UI?

1. Skip setup and ship faster

Magic UI gives you elegant, animated components out of the box. Our templates make them CMS-ready: no need to build a content model, wire props manually, or worry about where the data comes from.

2. Built-in AB testing and personalization

With Croct’s component CMS, you define content for different audiences and AB test variations using the same Magic UI component. It’s built into the platform. Growth and product teams using personalization see an average of 20% improvement in conversion rates and engagement.

3. Build with components, not pages

Forget static documents. Croct lets you manage your content at a component level: navbars, cards, CTAs, pricing sections, and more. Update once, apply everywhere to keep your UI consistent and scalable.

4. Backed by a growing ecosystem

Magic UI is built with React, TypeScript, Tailwind, and Motion (modern tools devs already use). Its micro-interactions and animation patterns are UX-friendly and production-ready. You can easily override styles or logic to match your brand.

TemplatesCMS-powered components

Explore Croct templates to skip boilerplate and ship faster. One command for components with built-in personalization and AB testing. No integration work needed.

When to use CMS-powered Magic UI components?

Croct's integration with Magic UI offers tailored solutions for both marketing websites and product interfaces.

  • Marketing websites

    The Croct and Magic UI combination accelerates the deployment of visually compelling, animated landing pages. Magic UI enables the creation of engaging user experiences without the need for custom animations, while Croct's component-based CMS allows growth teams to manage content dynamically, facilitating real-time personalization and AB testing.

  • Product interfaces

    Product teams benefit from Croct's ability to manage modular, reusable content blocks, ensuring consistency across dashboards and applications. Magic UI's components provide a cohesive design system, enhancing user experience through smooth animations and responsive design.

By leveraging Croct's CMS with Magic UI, both marketing and product teams can efficiently build, personalize, and optimize their web experiences, aligning with their specific objectives and user needs.

Get started with Magic UI + Croct components

Getting started is as easy as running one command:

npx croct@latest use magic-ui://ui/marquee

Or directly via registry URL:

npx croct@latest use https://magicui.design/r/marquee

You can check the list of components here.

Let's grow together!

Learn practical tactics our customers use to grow by 20% or more.