Skip to main content

​
What is the component library?

The component 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 component library window showing the All tab with a grid of ready-made components

The component library in your app editor

​
Opening the component library

You open the component library from the plus menu in your AI chat, next to where you type your prompts.
When you select a component, the AI chat switches to Build mode automatically. For more on chat modes, see AI chat modes.
To open the component library:
  1. Go to your app editor.
  2. In the AI chat, click the plus icon next to the prompt box.
  3. Click Explore component library.
The AI chat plus menu with Explore component library highlighted

Opening the component library from the plus menu

​
Browsing and previewing components

The component library opens in a full window with a search bar and category tabs across the top. All lists every available component, ordered so the ones most relevant to your app appear first. The remaining tabs group components by purpose, such as Commerce, Content, and Navigation. You have two ways to find a component:
  • Search: Type a keyword in the search bar to find matching components from the whole catalog, not just the tab you are on.
  • Categories: Click a category tab to browse components for that purpose.
The component library window with a search bar, category tabs, and a grid of components

Browsing and searching in the component library

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 component library with the Add to chat button highlighted

Adding a component to the chat from its preview

To add a component to your app:
  1. In the component 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

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.

​
FAQs

Click a question below to learn more.
You add one component per message. To add another, open the component 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.