> ## 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. # Adding components to your app > Browse the components library in your app editor to add polished, ready-made UI components that Base44 rebuilds to match your app's theme, fonts, and content. ## What is the components library? The components library is a collection of polished, ready-made UI components that you can add to your app straight from the AI chat in your app editor. Instead of describing a layout from scratch, you browse curated components, pick the one you want, and Base44 rebuilds it inside your app. When you add a component, Base44 themes it to match your site, adapting its colors, fonts, and content to fit your app rather than dropping in a generic block. You can always customize the design further by asking the AI chat. The components library window showing the For You tab with a grid of ready-made components *** ## Opening the components library You open the components library from the plus menu in your AI chat, next to where you type your prompts. **Before you begin:** Switch your AI chat to Build mode before you add a component. For more on chat modes, see [AI chat modes](/Building-your-app/AI-chat-modes). Selecting Build mode from the mode menu in the AI chat **To open the components library:** 1. Go to your app editor. 2. In the AI chat, click the plus icon next to the prompt box. 3. Click **Explore components library**. The AI chat plus menu with Explore components library highlighted *** ## Browsing and previewing components The components library opens in a full window with a search bar and category tabs across the top. **For You** shows recommended components, and the remaining tabs group components by purpose, such as **Commerce**, **Content**, **Dashboards & Analytics**, and **Navigation**. You have two ways to find a component: * **Search:** Type a keyword in the search bar to filter across all components. * **Categories:** Click a category tab to browse components for that purpose. The components library window with a search bar, category tabs, and a grid of components Click a component to open its preview, then interact with it to try its different states before you add it. *** ## Adding a component to your app You add one component at a time. Clicking **Add to chat** places the component in your AI chat with a message that you can edit before you send it. When you send the message, Base44 rebuilds the component as React code inside your app and adapts its styling, fonts, and copy to match your design. A component preview in the components library with the Add to chat button highlighted **To add a component to your app:** 1. In the components library, click the component you want. 2. Click **Add to chat**. 3. Add any extra instructions in the prompt box, then send your message. A component added to an app and rebuilt in the app editor If a component relies on a code library your app does not have yet, Base44 asks you to approve installing it as part of building the component. For more on how this works, see [Adding and using npm packages](/Building-your-app/NPM-packages). *** ## FAQs Click a question below to learn more. You add one component per message. To add another, open the components library again and repeat the steps. No. Adding a component is a standard build message, so it uses credits the same way any other prompt does. There is no separate charge for browsing or adding a component. Yes. A component becomes part of your app once it is built, so you can ask the AI chat to restyle it, change its content, or adjust its layout like any other part of your app.