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

# Ajouter des composants à votre application

> Parcourez la bibliothèque de composants dans votre éditeur d'application pour ajouter des composants d'interface soignés et prêts à l'emploi, que Base44 reconstruit selon le thème, les polices et le contenu de votre application.

La bibliothèque de composants est une collection de composants d'interface soignés et prêts à l'emploi. Vous pouvez les ajouter à votre application directement depuis le chat IA de votre éditeur d'application. Au lieu de décrire une mise en page de zéro, vous parcourez des composants sélectionnés. Vous choisissez celui que vous voulez, et Base44 le reconstruit dans votre application.

<Tip>
  Lorsque vous ajoutez un composant, Base44 l'adapte au thème de votre site. Il ajuste ses couleurs, ses polices et son contenu à votre application, au lieu d'insérer un bloc générique. Vous pouvez toujours personnaliser davantage le design en le demandant au chat IA.
</Tip>

<Frame caption="La bibliothèque de composants dans votre éditeur d'application">
  <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="Capture d'écran de la fenêtre de la bibliothèque de composants avec All components sélectionné, la liste des catégories et une grille de composants colorés" width="1296" height="848" data-path="images/components-library-v2-hero.png" />
</Frame>

***

## Ouvrir la bibliothèque de composants

Vous ouvrez la bibliothèque de composants depuis le menu plus de votre chat IA, à côté de la zone où vous saisissez vos prompts.

<Tip>
  Lorsque vous sélectionnez un composant, le chat IA passe automatiquement en **Build mode**. Pour en savoir plus sur les modes du chat, consultez [Modes du chat IA](/fr/Building-your-app/AI-chat-modes).
</Tip>

**Pour ouvrir la bibliothèque de composants :**

1. Accédez à votre éditeur d'application.
2. Dans le chat IA, cliquez sur l'icône plus à côté de la zone de prompt.
3. Cliquez sur **Explore component library**.

<Frame caption="Ouvrir la bibliothèque de composants depuis le menu plus">
  <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="Capture d'écran du menu plus du chat IA avec le curseur sur 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>

***

## Parcourir et prévisualiser les composants

La bibliothèque de composants s'ouvre dans une grande fenêtre. Une zone de recherche se trouve en haut et une liste de catégories à gauche. **All components** affiche tout le contenu de la bibliothèque. Chaque catégorie regroupe les composants par usage, comme **Commerce**, **Navigation** et **Booking & Scheduling**.

Vous avez 3 façons de trouver un composant :

* **Recherche :** saisissez un mot-clé dans la zone de recherche. La recherche porte sur la catégorie ouverte. Choisissez donc d'abord **All components** pour chercher dans toute la bibliothèque.
* **Catégories :** cliquez sur une catégorie à gauche pour n'afficher que ses composants. Sur un téléphone, les catégories apparaissent sur une ligne au-dessus de la zone de recherche.
* **Filtres :** cliquez sur **Filters** pour affiner la liste par tag.

Survolez un composant pour le voir en action, puis cliquez dessus pour ouvrir ses détails. Vous voyez un aperçu en direct, que vous pouvez basculer entre **Desktop** et **Mobile**. Vous voyez aussi une courte description. Pour certains composants, **Try different states** permet de voir chaque état avant de l'ajouter. Utilisez les flèches à côté du nom du composant pour passer au précédent ou au suivant.

<Frame caption="Parcourir une catégorie dans la bibliothèque de composants">
  <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="Capture d'écran de la bibliothèque de composants avec la catégorie Commerce encadrée et ses composants affichés avec Filters" width="2160" height="1188" data-path="images/components-library-v2-category.png" />
</Frame>

***

## Ajouter un composant

Depuis les détails d'un composant, vous indiquez à l'IA comment l'utiliser. Ensuite, vous l'ajoutez à votre prompt ou vous le construisez tout de suite. Vous ajoutez un composant par message. Lorsque vous envoyez le message, Base44 reconstruit le composant en code React dans votre application. Il adapte son style, ses polices et ses textes à votre design.

**Pour ajouter un composant à votre application :**

1. Cliquez sur l'icône plus à côté de la zone de prompt, dans le chat IA de votre éditeur d'application.
2. Cliquez sur **Explore component library**.
3. Cliquez sur le composant que vous voulez.
4. Sous **How should the AI use it?**, décrivez où il doit aller, par exemple une page ou une section. Cette étape est facultative.
5. Cliquez sur **Add to chat** pour le placer dans votre prompt et modifier d'abord le message. Ou cliquez sur **Build now** pour l'envoyer tout de suite.

<Frame caption="Les détails d'un composant, avec Add to chat et 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="Capture d'écran des détails d'un composant avec son aperçu en direct, sa description, et Add to chat et Build now encadrés" width="2160" height="1188" data-path="images/components-library-v2-details.png" />
</Frame>

<Note>
  **En savoir plus sur l'ajout de composants :**

  * **Ajout rapide :** pour ajouter un composant sans ouvrir ses détails, cliquez sur le **+** de sa carte.
  * **Revoir un composant :** pour revoir un composant plus tard, cliquez sur sa puce dans la zone de prompt ou au-dessus du message envoyé.
  * **Nouvelles bibliothèques de code :** si un composant dépend d'une bibliothèque de code absente de votre application, Base44 vous demande d'approuver son installation. Cela fait partie de la construction du composant. En savoir plus sur [l'ajout et l'utilisation de packages npm](/fr/Building-your-app/NPM-packages).
</Note>

***

## FAQ

Cliquez sur une question ci-dessous pour en savoir plus.

<AccordionGroup>
  <Accordion title="Puis-je ajouter plusieurs composants à la fois ?">
    Vous ajoutez un composant par message. Pour en ajouter un autre, ouvrez à nouveau la bibliothèque de composants et répétez les étapes.
  </Accordion>

  <Accordion title="L'ajout d'un composant coûte-t-il des crédits supplémentaires ?">
    Non. L'ajout d'un composant est un message de construction standard. Il utilise donc des crédits comme n'importe quel autre prompt. Parcourir ou ajouter un composant n'entraîne aucun frais séparé.
  </Accordion>

  <Accordion title="Puis-je modifier un composant après l'avoir ajouté ?">
    Oui. Une fois construit, un composant fait partie de votre application. Vous pouvez demander au chat IA de changer son style, son contenu ou sa mise en page, comme pour toute autre partie de votre application.
  </Accordion>
</AccordionGroup>

<Note>Cette page a été traduite par IA. Pour les informations les plus précises et à jour, consultez la [version anglaise](/). </Note>


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