How to create a component

In TeleportHQ, the fastest way to create a component is to right-click a section you already designed and choose Make Component. The section becomes a reusable component, and it is replaced on the page by a copy (an instance) of it. You can also start from scratch: on the Components folder, click + → New Component, or press Ctrl+Alt+K (Cmd+Alt+K on Mac).

Before you start#

• You need a role that can create components: Owner, Admin or Designer. The Editor role can't create components.
• Not sure you need a component? Read What are components, and when should I use them?

Turn existing elements into a component#

1. On the canvas or in the layers tree, click the element you want to reuse. For example, click a testimonial card.
2. To include several elements, hold Ctrl (Cmd on Mac) and click the others. They must sit side by side in the same container.
3. Right-click the selection.
4. Choose Make Component. It sits near the bottom of the menu.

What happens:

• If you selected several elements, TeleportHQ first wraps them in a new container.
• The component is named after the element, with a capital first letter, for example TestimonialCard. An element without a name gives a component called Component.
• The element on the page is replaced by an instance with a purple outline.
• The new component appears in the Components folder of the left sidebar.

Start a blank component#

1. In the left sidebar, click Pages, Components & Tree View.
2. On the Components folder row, click +.
3. Choose New Component. A component named CustomComponent opens in a new canvas tab.
4. Type a name in the highlighted field in the list, for example PricingCard.
5. Press Enter.
6. Build the component on the canvas like a page: add elements from Elements into it.

Other ways to start a blank component: press Ctrl+Alt+K (Cmd+Alt+K on Mac), open the command palette and run Create new component, or right-click a folder inside Components and choose New Component.

A blank component starts as a full-width column, 400px tall. Change its size in the Size section like any element.

Check that it worked#

The component is listed in the Components folder. To place it on a page, drag it from the list onto the canvas. See How to edit a component and update every copy.

Troubleshooting#

"Make Component" is missing from the menu It doesn't appear for the page itself, for elements inside a component instance, for slots, or for elements inside a button. Select a normal element on the page.

"Make Component" is greyed out Your selection contains elements that aren't side by side in the same container, or you selected an inner part of a dropdown, navbar or slider. Select only siblings, or select the whole dropdown, navbar or slider.

"Your current role does not have permission to create components" Ask the workspace Owner or an Admin to give you the Designer role.

"You reached the maximum number of components allowed in a project." The project hit its component limit: 1,000 on a trial. Paid plans have no limit, and a workspace whose plan has expired can't create components. Delete components you don't use, or upgrade. See https://teleporthq.io/pricing.

A warning says my name is reserved, for example "header" is a reserved name. Using "headerComponent" instead. Some words (like button, header, form or menu) are used by the code TeleportHQ generates. TeleportHQ adds "Component" to the name automatically. Rename it to something more specific if you like, for example SiteHeader.

Good to know#

• If the element had a Freestyle position, the position and margins move onto the new instance.
• Data connections that don't work inside the component are replaced by their current values.
• Props (editable text, images and links per instance) aren't created automatically unless you turn that on. See How to add editable settings to a component (props).