Skip to main content
A biblioteca de componentes é uma coleção de componentes de UI prontos e refinados. Você pode adicioná-los ao seu app direto do chat de IA no editor do app. Em vez de descrever um layout do zero, você explora componentes selecionados, escolhe o que quer e a Base44 o recria dentro do seu app.
Quando você adiciona um componente, a Base44 aplica o tema do seu site a ele. As cores, fontes e o conteúdo se adaptam ao seu app, em vez de inserir um bloco genérico. Você sempre pode personalizar ainda mais o design pedindo ao chat de IA.
Uma captura de tela da janela da biblioteca de componentes com All components selecionado, a lista de categorias e uma grade colorida de componentes

A biblioteca de componentes no editor do app

​
Abrindo a biblioteca de componentes

Você abre a biblioteca de componentes pelo menu de adição no chat de IA, ao lado de onde você digita seus prompts.
Quando você seleciona um componente, o chat de IA muda para o Build mode automaticamente. Para saber mais sobre os modos do chat, consulte Modos do chat de IA.
Para abrir a biblioteca de componentes:
  1. Acesse o editor do app.
  2. No chat de IA, clique no ícone de adição ao lado da caixa de prompt.
  3. Clique em Explore component library.
Uma captura de tela do menu de adição do chat de IA com o cursor sobre Explore component library

Abrindo a biblioteca de componentes pelo menu de adição

​
Explorando e visualizando componentes

A biblioteca de componentes abre em uma janela grande. Há uma caixa de pesquisa no topo e uma lista de categorias à esquerda. All components mostra tudo o que há na biblioteca. Cada categoria agrupa componentes por finalidade, como Commerce, Navigation e Booking & Scheduling. Você tem 3 formas de encontrar um componente:
  • Pesquisa: Digite uma palavra-chave na caixa de pesquisa. A busca é feita na categoria aberta. Para pesquisar a biblioteca inteira, escolha All components primeiro.
  • Categorias: Clique em uma categoria à esquerda para ver apenas os componentes dela. No celular, as categorias aparecem em uma linha acima da caixa de pesquisa.
  • Filtros: Clique em Filters para restringir a lista por tag.
Passe o cursor sobre um componente para vê-lo em ação. Depois, clique nele para abrir os detalhes. Você vê uma prévia ao vivo que pode alternar entre Desktop e Mobile, além de uma breve descrição. Em alguns componentes, use Try different states para ver cada estado antes de adicioná-lo. Use as setas ao lado do nome do componente para ir ao anterior ou ao próximo.
Uma captura de tela da biblioteca de componentes com a categoria Commerce destacada e seus componentes exibidos com Filters

Explorando uma categoria na biblioteca de componentes

​
Adicionando um componente

Nos detalhes de um componente, você diz à IA como usá-lo. Depois, você o adiciona ao seu prompt ou o cria na hora. Você adiciona um componente por mensagem. Quando você envia a mensagem, a Base44 recria o componente como código React dentro do seu app. Ela também adapta o estilo, as fontes e os textos ao seu design. Para adicionar um componente ao seu app:
  1. Clique no ícone de adição ao lado da caixa de prompt no chat de IA do editor do app.
  2. Clique em Explore component library.
  3. Clique no componente desejado.
  4. Em How should the AI use it?, descreva onde ele deve ficar, como uma página ou seção. Esta etapa é opcional.
  5. Clique em Add to chat para inseri-lo no seu prompt e editar a mensagem antes. Ou clique em Build now para enviá-lo na hora.
Uma captura de tela dos detalhes de um componente com a prévia ao vivo, a descrição e os botões Add to chat e Build now destacados

Os detalhes de um componente, com Add to chat e Build now

Mais sobre como adicionar componentes:
  • Adição rápida: Para adicionar um componente sem abrir os detalhes, clique no + do card dele.
  • Ver novamente: Para ver um componente de novo mais tarde, clique no chip dele na caixa de prompt ou acima da mensagem enviada.
  • Novas bibliotecas de código: Se um componente depende de uma biblioteca de código que seu app ainda não tem, a Base44 pede sua aprovação para instalá-la ao criar o componente. Saiba mais sobre como adicionar e usar pacotes npm.

​
Perguntas frequentes

Clique em uma pergunta abaixo para saber mais.
Você adiciona um componente por mensagem. Para adicionar outro, abra a biblioteca de componentes de novo e repita as etapas.
Não. Adicionar um componente é uma mensagem de criação padrão. Ela usa créditos da mesma forma que qualquer outro prompt. Não há cobrança separada para explorar ou adicionar um componente.
Sim. Depois de criado, o componente passa a fazer parte do seu app. Você pode pedir ao chat de IA para mudar o estilo, o conteúdo ou o layout dele, como em qualquer outra parte do app.
Esta página foi traduzida usando IA. Para as informações mais precisas e atualizadas, consulte a versão em inglês.