How to build reusable components in Bubble

In Bubble, the way to build reusable components is to use Reusable Elements. You create one master element once (like a header, sidebar, card UI, popup, or a custom widget), define what data it expects, and then drop that same component anywhere in your app. When you update the reusable, every page using it updates automatically.

What a reusable component is

A Reusable Element in Bubble is a self‑contained block of UI and workflows. Think of it like a mini page you can embed inside other pages. It can have its own custom states, workflows, data sources, and it can receive inputs using the “Expose this element’s fields to parent elements” option.

• Good use cases: headers, footers, navbars, cards, buttons with logic, popups, repeating row templates.
• Bad use cases: things that need to directly access page-level custom states or URL parameters (unless you pass them in).

How to create one

Inside the Elements panel, choose Reusable element, give it a name, then design it exactly like a page. Add groups, text, inputs, workflows, custom states—everything works normally.

If the component needs to receive information from the parent page (like a “User” record for a profile card), open the reusable’s inspector and enable Expose this element’s fields.... Bubble will let you create custom fields such as User (type: User).

Sending data into the reusable

Once you drag the reusable onto a page, you’ll see its custom fields in the property editor. Set the values the same way you set data sources anywhere else.

Current Page User’s Friends:first item   // Example of passing a User into a reusable card

Emitting events back to the page

Sometimes the parent page needs to know that something happened inside the reusable (for example, a button was clicked). Inside the reusable’s workflow editor, you can use the action Trigger a custom event from a reusable element. Then on the parent page, you create a workflow with the event When a reusable element triggers a custom event.

Structuring your app with reusables

• Build a small reusable for every UI pattern you repeat more than twice.
• Keep logic inside the reusable unless it needs page context.
• Use custom states inside the reusable for temporary UI state.
• Do not reference page elements from inside the reusable; always pass data in.

This approach keeps pages clean, avoids duplicated workflows, and makes the app easier to maintain as it grows.