> ## 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.

# Agregar componentes a tu app

> Explora la biblioteca de componentes en el editor de tu app. Agrega componentes de interfaz pulidos y listos que Base44 adapta al tema, las fuentes y el contenido de tu app.

La biblioteca de componentes es una colección de componentes de interfaz pulidos y listos para usar. Puedes agregarlos a tu app directamente desde el chat de IA del editor. En lugar de describir un diseño desde cero, explora componentes seleccionados y elige el que quieras. Base44 lo reconstruye dentro de tu app.

<Tip>
  Cuando agregas un componente, Base44 lo adapta al estilo de tu sitio. Ajusta sus colores, fuentes y contenido a tu app, en lugar de insertar un bloque genérico. Siempre puedes personalizar más el diseño pidiéndoselo al chat de IA.
</Tip>

<Frame caption="La biblioteca de componentes en el editor de tu app">
  <img src="https://mintcdn.com/base44/tv-bTHytWsZ52-_o/images/components-library-v2-hero.png?fit=max&auto=format&n=tv-bTHytWsZ52-_o&q=85&s=ca00ba23e2cda4bcc3f33ae5fb4aea16" alt="Captura de pantalla de la ventana de la biblioteca de componentes con All components seleccionado, la lista de categorías y una cuadrícula de componentes coloridos" width="1296" height="848" data-path="images/components-library-v2-hero.png" />
</Frame>

***

## Abrir la biblioteca de componentes

Abre la biblioteca de componentes desde el menú del signo más en el chat de IA, junto a donde escribes tus prompts.

<Tip>
  Cuando seleccionas un componente, el chat de IA cambia automáticamente a **Build mode**. Para obtener más información sobre los modos de chat, consulta [Modos del chat de IA](/es/Building-your-app/AI-chat-modes).
</Tip>

**Para abrir la biblioteca de componentes:**

1. Ve al editor de tu app.
2. En el chat de IA, haz clic en el icono del signo más junto al cuadro de prompt.
3. Haz clic en **Explore component library**.

<Frame caption="Abrir la biblioteca de componentes desde el menú del signo más">
  <img src="https://mintcdn.com/base44/tv-bTHytWsZ52-_o/images/components-library-v2-plus-menu.png?fit=max&auto=format&n=tv-bTHytWsZ52-_o&q=85&s=4d0a09d233a19ab596d9d6b26458ab8a" alt="Captura de pantalla del menú del signo más del chat de IA con el cursor sobre Explore component library" style={{ width: "60%", display: "block", margin: "0 auto" }} width="712" height="554" data-path="images/components-library-v2-plus-menu.png" />
</Frame>

***

## Explorar y previsualizar componentes

La biblioteca de componentes se abre en una ventana grande. Arriba hay un cuadro de búsqueda y a la izquierda una lista de categorías. **All components** muestra todo el contenido de la biblioteca. Cada categoría agrupa los componentes según su propósito, como **Commerce**, **Navigation** y **Booking & Scheduling**.

Tienes 3 formas de encontrar un componente:

* **Búsqueda:** Escribe una palabra clave en el cuadro de búsqueda. La búsqueda se hace en la categoría abierta. Para buscar en toda la biblioteca, elige primero **All components**.
* **Categorías:** Haz clic en una categoría a la izquierda para ver solo sus componentes. En un teléfono, las categorías aparecen como una fila sobre el cuadro de búsqueda.
* **Filtros:** Haz clic en **Filters** para acotar la lista por etiqueta.

Pasa el cursor sobre un componente para verlo en acción. Luego haz clic en él para abrir sus detalles. Verás una vista previa en vivo que puedes cambiar entre **Desktop** y **Mobile**, y una breve descripción. Algunos componentes incluyen **Try different states** para ver cada estado antes de agregarlo. Usa las flechas junto al nombre del componente para ir al anterior o al siguiente.

<Frame caption="Explorar una categoría en la biblioteca de componentes">
  <img src="https://mintcdn.com/base44/tv-bTHytWsZ52-_o/images/components-library-v2-category.png?fit=max&auto=format&n=tv-bTHytWsZ52-_o&q=85&s=2382a5669de546111436abebb14b466c" alt="Captura de pantalla de la biblioteca de componentes con la categoría Commerce resaltada y sus componentes mostrados con Filters" width="2160" height="1188" data-path="images/components-library-v2-category.png" />
</Frame>

***

## Agregar un componente

Desde los detalles de un componente, indica a la IA cómo usarlo. Luego agrégalo a tu prompt o constrúyelo de inmediato. Puedes agregar un componente por mensaje. Al enviar el mensaje, Base44 reconstruye el componente como código React dentro de tu app. También adapta su estilo, fuentes y textos a tu diseño.

**Para agregar un componente a tu app:**

1. Haz clic en el icono del signo más junto al cuadro de prompt en el chat de IA del editor de tu app.
2. Haz clic en **Explore component library**.
3. Haz clic en el componente que quieras.
4. En **How should the AI use it?**, describe dónde va, como una página o sección. Este paso es opcional.
5. Haz clic en **Add to chat** para colocarlo en tu prompt y editar el mensaje primero. O haz clic en **Build now** para enviarlo de inmediato.

<Frame caption="Los detalles de un componente, con Add to chat y Build now">
  <img src="https://mintcdn.com/base44/tv-bTHytWsZ52-_o/images/components-library-v2-details.png?fit=max&auto=format&n=tv-bTHytWsZ52-_o&q=85&s=9278e78651e0f8d5d2ae2feafeb5f6db" alt="Captura de pantalla de los detalles de un componente con su vista previa en vivo, su descripción y los botones Add to chat y Build now resaltados" width="2160" height="1188" data-path="images/components-library-v2-details.png" />
</Frame>

<Note>
  **Más sobre cómo agregar componentes:**

  * **Agregado rápido:** Para agregar un componente sin abrir sus detalles, haz clic en el **+** de su tarjeta.
  * **Volver a verlo:** Para ver un componente más tarde, haz clic en su chip en el cuadro de prompt o sobre el mensaje que enviaste.
  * **Nuevas bibliotecas de código:** Algunos componentes dependen de una biblioteca de código que tu app aún no tiene. En ese caso, Base44 te pide aprobar su instalación al construir el componente. Obtén más información sobre [cómo agregar y usar paquetes npm](/es/Building-your-app/NPM-packages).
</Note>

***

## Preguntas frecuentes

Haz clic en una pregunta para obtener más información.

<AccordionGroup>
  <Accordion title="¿Puedo agregar más de un componente a la vez?">
    Puedes agregar un componente por mensaje. Para agregar otro, abre de nuevo la biblioteca de componentes y repite los pasos.
  </Accordion>

  <Accordion title="¿Agregar un componente cuesta créditos adicionales?">
    No. Agregar un componente es un mensaje de construcción estándar. Usa créditos igual que cualquier otro prompt. No hay ningún cargo aparte por explorar o agregar un componente.
  </Accordion>

  <Accordion title="¿Puedo cambiar un componente después de agregarlo?">
    Sí. Una vez construido, el componente forma parte de tu app. Puedes pedirle al chat de IA que cambie su estilo, su contenido o su diseño, como con cualquier otra parte de tu app.
  </Accordion>
</AccordionGroup>

<Note>Esta página fue traducida con IA. Para obtener la información más precisa y actualizada, consulta la [versión en inglés](/). </Note>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.