How to create and use components

Learn to create, save and reuse elements and sections by building reusable components and make them dynamic using props.

What are components?
Creating a component
Editing a component
Editing default props
Using a component and props
Detach component instance

1. What are components?

The best way to use TeleportHQ to the max is by creating reusable components. Components are a collection of elements that can then be reused to speed up the composition of your layout. They are similar to symbols in Sketch or components from Figma.

Once you create the main component you can use it in more places by creating more instances of it, which behave like 'smart' copies. The instances of the component can individually be customized from the main component by what we call component props.

Props are customizable properties for every component instance. It is what makes an instance different from the main component. Props are automatically created and allow you to change things such as: image source, links or text for a component instance.

On hover or select, all component instances will have a purple border to be easily identified from non-component elements.

2. Creating a component

There are two ways in which you can create a component.

Go to the Layers & Files tab
Click on the "+" icon
Select New component

In the Canvas, you will be presented with a new view, the component editor, where you can start creating your layout by dragging elements, just as you would do in a normal page.

Another way of creating a component is by selecting an element, right click on it and choose Make component.

To start editing a main component, double click on a component instance and it it will take you to the component editor.

3. Editing a component

The component editor behaves exactly like the page editor and it starts with a fixed size. Once open you can use the Right panel properties to make changes to the elements of the component.

Making the higher node of the component smaller will show a blank background which is not part of the component's size.

4. Editing default props

When editing a component, in the** top right part of the Canvas** there is the Props panel which contains all the automatically generated props for your component, based on the existing child elements.

Selecting a prop from the list will highlight the element it is attached to. You can edit the props name and default value for each of them.

5. Using components and props

Once your component is created, when editing a page (or even another component), you can add an existing component. To do that:

Go to the Layers & Files tab -> Components
Drag the component from the list, thus creating a component instance.



When selecting a component instance, the normal Visual Inspector will be a bit different.

The first section of the Right panel will contain the props that you can change on that component instance. Setting values to component props will override the default values coming from the main component and only update the selected instance.

Under the Props section you will then find other styling properties that you can use to customize that particular instance of the component.

6. Detach component instance

An existing component instance can always be detached from the main component. You can then freely edit it like it was a regular part of the page, without affecting the main component. To detach a component instance from the main component:

Right click the component instance in the canvas or in the Layers list
Click Detach component from the newly opened menu

To learn more about copying components to different projects check out this article.

Updated on: 28/03/2025