> ## Documentation Index > Fetch the complete documentation index at: https://docs.base44.com/llms.txt > Use this file to discover all available pages before exploring further. > ## Agent Instructions > Internal links on these pages omit the .md extension. Append .md to a docs page URL, or send an Accept: text/markdown header, to get that page as markdown. # Adicionando componentes ao seu app > Explore a biblioteca de componentes no editor do app para adicionar componentes de UI prontos e refinados que a Base44 recria de acordo com o tema, as fontes e o conteúdo do seu app. 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 *** ## 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](/pt-BR/Building-your-app/AI-chat-modes). **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 *** ## 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 *** ## 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 **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](/pt-BR/Building-your-app/NPM-packages). *** ## 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](/). This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.