Importing external UI components

General
1

Hi,

I am new to builder and a non-dev. We are building a new project and I am wodering if / how I can also register components from external sources eg. Flowbite.

I would like to achieve the following:

  1. Have components from these external sources directly available in builder (instead of going though Figma)
  2. Adapt them to my needs, customise text and assets etc.
  3. deploy to our app (Vue, Nuxt)

Is that a realistic workflow at all? And if so how can I register these external components to builder?

Thanks
Andreas

2

Hi @adiehl, welcome to the Builder forum!

While there isn’t a direct way to import components from Flowbite into Builder without going through Figma, you can still use them by manually recreating and registering them as custom components in your Vue/Nuxt project.

Here’s how you can do it:

  1. Register them in Builder: You can register any Vue/Nuxt component in Builder, making it available in the Visual Editor.
  2. Control customization through your codebase: While the components won’t be directly editable within the Visual Editor, you can expose props to allow content creators to modify things like text, images, and styles through Builder’s UI. Any deeper customization will still need to be handled in your codebase.
  3. Deploy to your app: Once registered, these components will be automatically rendered in your app when you use Builder content.

For a detailed step-by-step guide on how to register custom components in Builder, check out this documentation:
:backhand_index_pointing_right: Registering Custom Components in Builder

Let me know if you have any questions! :rocket:

3

Thanks, which means I first have to register them in our app and than take it back to builder.io, is that correct?

4

That is correct, after integrating Builder into your app, you can register your custom components. Once registered, they’ll appear in the Builder Visual Editor.