As you build your application, you’ll often find yourself recreating the same set of UI elements. Imagine building a standardized user profile card with an image, a name, and a button. Instead of rebuilding this card on every page, you can create a single Reusable Component.
What is a Reusable Component?Think of it as your own custom-built LEGO brick. You design and build it once, and then you can use that exact same brick anywhere in your application. If you update the master brick, every copy of it updates automatically.

​
The Anatomy of a Reusable Component

Just like Functions, Reusable Components have their own internal logic and data, which makes them incredibly powerful.

Props (Inputs)

Think of these as the “customizable parts” of your LEGO brick.Props allow you to pass data into your component from the outside. For a user profile card, you would have props for the userImage, userName, and profileLink, so each card can display different information while looking the same.

Local States (Internal Memory)

Think of these as the component’s own private memory.Local States are variables that exist only within the component. For example, a “Show More” button inside your component could use a local isExpanded state to track whether it’s open or closed, without affecting anything outside the component.

​
How to Create a Reusable Component

Let’s walk through creating a simple “User Profile Card” component.
1

1. Navigate to the Components Tab

In the Left Panel of the Visual Editor, click on the Components tab.
2

2. Create a New Component

Click the + icon to create a new component. Give it a descriptive name, like UserProfileCard. This will open a dedicated canvas just for designing this component.
3

3. Define Props and Local States

With your new component open, you can define its inputs and internal memory in the properties panel. - To add a Prop: Define its name (e.g., userName) and its data type. - To add a Local State: Define its name and data type, just like a normal page state.
4

4. Design the Component's UI

On the component’s canvas, build its visual layout using standard elements. For our UserProfileCard, you would add an Image, a Text element, and a Button.Now, bind these elements to your props. For example:
  • Bind the Image element’s Source to the userImage prop.
  • Bind the Text element’s Content Source to the userName prop.
Your component is now a self-contained, customizable UI element.
Current Limitation: At this time, you cannot place a reusable component inside itself (this is known as recursion).

​
How to Use a Reusable Component

Once your component is created, using it is easy.
  1. Navigate to any page in your application.
  2. In the Left Panel, switch to the Components tab. You will see your newly created UserProfileCard in the list.
  3. Drag and drop your component onto the canvas just like any other UI element.
  4. With the component selected, the Properties Panel on the right will now show all the Props you defined. You can provide static or dynamic data for each prop to customize that specific instance of the component.