---
title: "Componentes Magic UI com CMS e conteúdo dinâmico"
slug: "componentes-magic-ui"
locale: "pt-br"
description: "Utilize componentes Magic UI com os templates da Croct para componentes React com animação, integração com CMS, personalização e teste AB. Sem integrações extras."
published_at: "2025-05-06"
updated_at: "2025-06-05"
image: "https://storage.googleapis.com/croct-assets-b931d070/blog/Componentes_Magic_UI_com_CMS_e_conteudo_dinamico_5d812a87a0/Componentes_Magic_UI_com_CMS_e_conteudo_dinamico_5d812a87a0.png"
authors: ["Juliana Amorim"]
category: "Novidades"
tags: ["React","UI de Aplicações"]
canonical: "https://blog.croct.com/pt-br/post/componentes-magic-ui"
---

# Componentes Magic UI com CMS e conteúdo dinâmico

Se você usa [Magic UI](https://magicui.design), uma [biblioteca de componentes React](/pt-br/post/melhores-bibliotecas-componentes-react.md) com mais de 16.000 stars no GitHub, você já sabe o quão flexível e versátil ela é para construção de landing pages e páginas de marketing. No entanto, mesmo os melhores componentes de UI podem ser limitados se eles não tiverem conteúdo dinâmico e personalização.

É por isso que acabamos de lançar [templates para Magic UI](https://croct.com/templates/library/magic-ui): uma integração de componentes com CMS e suporte à personalização e testes AB em um clique, desde o primeiro dia. Sem configuração, sem adaprações.

![Página de templates da Croct para componentes Magic UI](https://storage.googleapis.com/croct-assets-b931d070/blog/Magic_UI_templates_a0a7c92267/Magic_UI_templates_a0a7c92267.png "Página de templates da Croct para componentes Magic UI")

## Por que usar os tempaltes da Croct para Magic UI?

### 1. Configuração simplificada, sprints mais produtivos

A Magic UI oferece componentes elegantes e animados prontos para uso. Nossos templates os tornam compatíveis com CMS: você não precisa criar um modelo de conteúdo, criar adaptações de código manualmente ou se preocupar com a origem dos dados.

[Video](https://storage.googleapis.com/croct-assets-b931d070/assets/app/92894646-dc3d-4553-bfaf-194598f6aa4c/images/magic-ui.mp4)

### 2. Teste AB e personalização integrados

Com o CMS de componentes da Croct, você define conteúdos para diferentes públicos e roda testes AB usando o mesmo componente Magic UI. Times de growth e produto que utilizam personalização observam um crescimento médio de 20% nas taxas de conversão e no engajamento.

### 3. CMS para componentes, não para páginas

Esqueça documentos estáticos. A Croct permite que você gerencie seu conteúdo em nível de componente: barras de navegação, menus, CTAs, banners, seções de preços e muito mais. Atualize os componentes uma única vez e mantenha consistência de comunicação em todos os lugares em que ele é utilizado, mantendo sua interface consistente e escalável.

### 4. Ecossistema em crescimento

A Magic UI foi desenvolvida com React, TypeScript, Tailwind e Motion (ferramentas modernas que os desenvolvedores já usam). Suas microinterações e padrões de animação são amigáveis à UX e prontos para produção. Você pode facilmente substituir estilos ou lógica para combinar com sua marca.

## Quando usar componentes Magic UI com um CMS?

A integração da Croct com a Magic UI oferece soluções personalizadas para sites de marketing e interfaces de produtos.

- **Sites de marketing**

  A combinação da Croct + Magic UI acelera a implementação de landing pages animadas e visualmente atraentes. A Magic UI permite a criação de experiências engajantes para o usuário sem a necessidade de animações personalizadas, enquanto o CMS baseado em componentes da Croct permite que times de growth gerenciem o conteúdo dinamicamente, facilitando a personalização em tempo real e os testes AB.

- **Interfaces de produtos**

  Times de produto se beneficiam da capacidade da Croct de gerenciar blocos de conteúdo modulares e reutilizáveis, garantindo consistência entre interfaces e aplicativos. Os componentes da Magic UI oferecem um sistema de design coeso, aprimorando a experiência do usuário por meio de animações suaves e design responsivo.

Ao utilizar o CMS da Croct com Magic UI, times de growth e de produto podem criar, personalizar e otimizar com eficiência suas experiências na web, alinhando-as aos seus objetivos específicos e às necessidades dos usuários.

## Experimente os componentes Magic UI + Croct

Começar é tão fácil quanto executar um comando:

```shell noLineNumber
npx croct use magic-ui://component/marquee
```

Ou diretamente via URL de registro:

```shell noLineNumber
npx croct use https://magicui.design/r/marquee
```

Você pode verificar a lista completa de componentes [aqui](https://croct.com/templates/library/magic-ui).