> ## 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. # Komponenten zu deiner App hinzufügen > Durchsuche die Komponentenbibliothek in deinem App-Editor und füge ausgefeilte, fertige UI-Komponenten hinzu. Base44 baut sie passend zu Theme, Schriftarten und Inhalten deiner App nach. Die Komponentenbibliothek ist eine Sammlung ausgefeilter, fertiger UI-Komponenten. Du fügst sie direkt über den KI-Chat in deinem App-Editor zu deiner App hinzu. Du musst kein Layout von Grund auf beschreiben. Du durchsuchst kuratierte Komponenten, wählst die gewünschte aus, und Base44 baut sie in deiner App nach. Wenn du eine Komponente hinzufügst, passt Base44 sie an das Theme deiner Website an. Farben, Schriftarten und Inhalte werden an deine App angepasst, statt einen generischen Block einzufügen. Du kannst das Design jederzeit über den KI-Chat weiter anpassen. Ein Screenshot des Fensters Component library mit ausgewähltem Eintrag All components, der Liste Categories und einem bunten Komponentenraster *** ## Die Komponentenbibliothek öffnen Du öffnest die Komponentenbibliothek über das Plus-Menü in deinem KI-Chat. Es befindet sich neben dem Feld, in das du deine Prompts eingibst. Wenn du eine Komponente auswählst, wechselt der KI-Chat automatisch in den **Build mode**. Mehr zu den Chat-Modi findest du unter [KI-Chat-Modi](/de/Building-your-app/AI-chat-modes). **So öffnest du die Komponentenbibliothek:** 1. Öffne deinen App-Editor. 2. Klicke im KI-Chat auf das Plus-Symbol neben dem Prompt-Feld. 3. Klicke auf **Explore component library**. Ein Screenshot des Plus-Menüs im KI-Chat mit dem Cursor auf Explore component library *** ## Komponenten durchsuchen und ansehen Die Komponentenbibliothek öffnet sich in einem großen Fenster. Oben befindet sich ein Suchfeld, links eine Liste von Kategorien. **All components** zeigt alles in der Bibliothek. Jede Kategorie gruppiert Komponenten nach Zweck, etwa **Commerce**, **Navigation** und **Booking & Scheduling**. Du hast 3 Möglichkeiten, eine Komponente zu finden: * **Suche:** Gib ein Stichwort in das Suchfeld ein. Die Suche durchsucht die geöffnete Kategorie. Wähle zuerst **All components**, um die ganze Bibliothek zu durchsuchen. * **Kategorien:** Klicke links auf eine Kategorie, um nur ihre Komponenten zu sehen. Auf dem Smartphone erscheinen die Kategorien als Zeile über dem Suchfeld. * **Filter:** Klicke auf **Filters**, um die Liste nach Tags einzugrenzen. Fahre mit der Maus über eine Komponente, um sie in Aktion zu sehen. Klicke dann darauf, um ihre Details zu öffnen. Du siehst eine Live-Vorschau, die du zwischen **Desktop** und **Mobile** umschalten kannst, und eine kurze Beschreibung. Bei manchen Komponenten kannst du mit **Try different states** jeden Zustand vor dem Hinzufügen ansehen. Mit den Pfeilen neben dem Namen der Komponente wechselst du zur vorherigen oder nächsten. Ein Screenshot der Komponentenbibliothek mit hervorgehobener Kategorie Commerce und ihren Komponenten mit Filters *** ## Eine Komponente hinzufügen In den Details einer Komponente sagst du der KI, wie sie die Komponente verwenden soll. Dann fügst du sie zu deinem Prompt hinzu oder baust sie sofort. Du fügst eine Komponente pro Nachricht hinzu. Wenn du die Nachricht sendest, baut Base44 die Komponente als React-Code in deiner App nach. Styling, Schriftarten und Texte werden an dein Design angepasst. **So fügst du eine Komponente zu deiner App hinzu:** 1. Klicke im KI-Chat deines App-Editors auf das Plus-Symbol neben dem Prompt-Feld. 2. Klicke auf **Explore component library**. 3. Klicke auf die gewünschte Komponente. 4. Beschreibe unter **How should the AI use it?**, wo sie hingehört, etwa eine Seite oder einen Abschnitt. Dieser Schritt ist optional. 5. Klicke auf **Add to chat**, um sie in deinen Prompt einzufügen und die Nachricht vorher zu bearbeiten. Oder klicke auf **Build now**, um sie sofort zu senden. Ein Screenshot der Details einer Komponente mit Live-Vorschau, Beschreibung und hervorgehobenen Schaltflächen Add to chat und Build now **Mehr zum Hinzufügen von Komponenten:** * **Schnell hinzufügen:** Um eine Komponente ohne Öffnen der Details hinzuzufügen, klicke auf das **+** auf ihrer Karte. * **Erneut ansehen:** Um eine Komponente später erneut anzusehen, klicke auf ihren Chip im Prompt-Feld oder über der gesendeten Nachricht. * **Neue Code-Bibliotheken:** Manche Komponenten brauchen eine Code-Bibliothek, die deine App noch nicht hat. Dann bittet dich Base44 beim Bauen der Komponente, die Installation zu bestätigen. Erfahre mehr über das [Hinzufügen und Verwenden von npm-Paketen](/de/Building-your-app/NPM-packages). *** ## FAQs Klicke unten auf eine Frage, um mehr zu erfahren. Du fügst eine Komponente pro Nachricht hinzu. Um eine weitere hinzuzufügen, öffne die Komponentenbibliothek erneut und wiederhole die Schritte. Nein. Das Hinzufügen einer Komponente ist eine normale Build-Nachricht. Sie verbraucht Credits wie jeder andere Prompt. Für das Durchsuchen oder Hinzufügen einer Komponente fallen keine separaten Kosten an. Ja. Nach dem Bauen ist eine Komponente Teil deiner App. Du kannst den KI-Chat bitten, ihr Styling, ihren Inhalt oder ihr Layout zu ändern, wie bei jedem anderen Teil deiner App. Diese Seite wurde mit KI übersetzt. Die genauesten und aktuellsten Informationen findest du in der [englischen Version](/). This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.