---
title: "Templates e componentes de UI com CMS, personalização e teste AB"
slug: "templates-componentes-UI-cms"
locale: "pt-br"
description: "Depois da CLI, lançamos agora a nossa biblioteca de componentes e templates de UI com CMS, projetados para personalização, testes AB e iteração rápida em escala."
published_at: "2025-06-02"
updated_at: "2025-06-02"
image: "https://storage.googleapis.com/croct-assets-b931d070/blog/Croct_CMS_powered_components_a5a806e6b9/Croct_CMS_powered_components_a5a806e6b9.png"
authors: ["Juliana Amorim"]
category: "Novidades"
tags: ["Otimização de Produto","Conteúdo Dinâmico","Headless CMS","Updates","UI de Aplicações"]
canonical: "https://blog.croct.com/pt-br/post/templates-componentes-UI-cms"
---

# Templates e componentes de UI com CMS, personalização e teste AB

2025 tem se mostrado um ano agitado. Temos mais novidade no ar!

Depois da CLI, lançamos agora a nossa [biblioteca de componentes e templates de UI com CMS](https://croct.com/templates), projetados para personalização, testes AB e iteração rápida em escala.

Não importa se você está criando produtos SaaS ou otimizando experiências de e-commerce, esses novos templates permitem que você vá da ideia à integração em minutos, não semanas.

![Biblioteca de componentes e templates da Croct CMS](https://storage.googleapis.com/croct-assets-b931d070/blog/Croct_CMS_powered_components_Template_page_print_e05e1e8ade/Croct_CMS_powered_components_Template_page_print_e05e1e8ade.png "Biblioteca de componentes e templates da Croct CMS")

## De templates simples a templates inteligentes

Estamos acostumados a encontrar templates estáticos por ai: eles apenas copiam e colam snippets de código no seu projeto. Os templates do Croct, por outro lado, são inteligentes e contextuais.

Eles não fornecem apenas componentes com código estático, mas sim componentes de UI totalmente conectados, alimentados por CMS e com lógica incorporada.

Nos bastidores, nossa CLI lê a estrutura do seu projeto, identifica sua stack, dependências, etc., e adapta a configuração de acordo com o seu contexto. Ela também verifica o que está disponível na sua conta, como seu plano, recursos habilitados e cotas, para configurar tudo automaticamente.

Com um único comando, um template pode:

- Criar e registrar novos componentes em seu projeto
- Vincular esses componentes aos slots do CMS
- Configurar testes AB e experiências personalizadas
- Impementar conteúdo de exemplo pronto para teste

Sem configuração extra, sem dores de cabeça, sem snippets de código pra cá e pra lá. Basta executar:

```shellcmd noLineNumber
croct use <template>
```

…e sua interface está pronta para personalização e experimentação.

![Comando de uso de template na Croct](https://storage.googleapis.com/croct-assets-b931d070/blog/Croct_CMS_powered_components_CLI_command_e31c9053cc/Croct_CMS_powered_components_CLI_command_e31c9053cc.png "Comando de uso de template na Croct")

## O que é uma biblioteca de componentes com CMS?

Imagine uma biblioteca de componentes de UI que não apenas fornece blocos de estilizados e acessíveis, mas também permite que você:

- Defina o conteúdo de cada componente diretamente no seu CMS
- Execute testes AB e teste variantes instantaneamente
- Personalize cada experiência com base no contexto do visitante

É exatamente isso que a Croct oferece.

Ela foi projetada para times de produto que precisam entregar projetos rápidos e desenvolvedores cansados de integrar ferramentas. Todos os componentes seguem o seu design system, respeitam a lógica do seu app e simplesmente funcionam, seja otimizando uma seção principal ou testando títulos em uma página de preços.

## Nossas primeiras bibliotecas em destaque

Começamos adicionando templates com CMS para algumas das principais [bibliotecas de componentes React](/pt-br/post/melhores-bibliotecas-componentes-react.md):

- [Material UI](https://croct.com/templates/library/material-ui)
- [Shadcn](https://croct.com/templates/library/shadcn)
- [Hero UI](https://croct.com/templates/library/hero-ui)
- [Magic UI](https://croct.com/templates/library/magic-ui)

Cada template inclui componentes pré-definidos, como seções de heros, CTAs, listas de features e banners, com personalização e testes AB prontos para uso.

![Algumas das bibliotecas de componentes de UI mais populares](https://storage.googleapis.com/croct-assets-b931d070/blog/Croct_CMS_powered_components_Stacks_6fb91d0a3a/Croct_CMS_powered_components_Stacks_6fb91d0a3a.png "Algumas das bibliotecas de componentes de UI mais populares")

## Templates de bônus para estratégias comprovadas

Também estamos lançando templates de estratégia para padrões comprovados de personalização e experimentação, incluindo:

- [Estratégias para SaaS](https://croct.com/templates/use-case/saas)
- [Estratégias para e-commerce](https://croct.com/templates/use-case/e-commerce)
- [Estratégias de geomarketing](https://croct.com/templates/use-case/location)

Esses não são apenas componentes de interface do usuário, mas experiências pré-configuradas que conectam conteúdo, lógica e estratégia em um único template reutilizável.

![Templates de estratégia de bônus](https://storage.googleapis.com/croct-assets-b931d070/blog/Croct_CMS_powered_components_Bonus_templates_4b4ab9ba25/Croct_CMS_powered_components_Bonus_templates_4b4ab9ba25.png "Templates de estratégia de bônus")

## Junte-se à comunidade

Templates não são algo que apenas nós, da Croct, criamos. São algo que você também pode criar e compartilhar.

Digamos que você criou um fluxo de integração incrível, uma tabela de preços otimizada para CRO ou uma experiência personalizável replicável. Basta executar:

```shellcmd noLineNumber
croct create template
```

A CLI guiará você na seleção de componentes, slots e experiências a serem incluídos. Ela empacota tudo para que você possa distribuir para o seu time, reutilizar entre diferentes contas ou compartilhar com a comunidade.

Estamos lançando hoje com alguns [templates](https://croct.com/templates) oficiais, mas a visão é ainda maior. Queremos tornar a personalização e a experimentação tão modulares, colaborativas e escaláveis quanto o próprio desenvolvimento baseado em componentes.

Vamos construir o futuro da experimentação de IU, um componente de cada vez.