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.
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 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.
Browsing and searching in the components library
Click a component to open its preview, then interact with it to try its different states before you add it.
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.
Adding a component to the chat from its preview
To add a component to your app:
In the components library, click the component you want.
Click Add to chat.
Add any extra instructions in the prompt box, then send your message.
A component rebuilt inside your app
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.
You add one component per message. To add another, open the components library again and repeat the steps.
Does adding a component cost extra credits?
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.
Can I change a component after adding it?
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.
