How to change one copy of a component without changing the others

In TeleportHQ, you have two ways to make one copy (instance) of a component different. If the component has props, select the copy and change its values in the Component Properties section of the right panel. The copy keeps updating when the main component changes. If you need bigger changes, right-click the copy and choose Detach Instance: it becomes normal elements you can edit freely, but it stops updating.

Before you start#

• Decide which way fits:
  • Change a value with Component Properties when you only need different text, an image or a link, for example a different name on one "Team member" card.
  • Detach when the copy needs a different structure or design, for example an extra button in one hero section.
• On a page, anyone who can edit the page can change a copy's values or detach it. Inside another component, you need the Owner, Admin or Designer role.

Option 1: Change a value in Component Properties#

1. On the page, click the component instance. It has a purple outline.
2. In the right panel → Visual tab, open the Component Properties section.
3. Find the value to change. Values are grouped: for example, texts under Content, an image source under Attributes, and links under Link.
4. Type or pick the new value for this copy, for example Maria Lopez.

Only this copy changes. Other copies keep the main component's default value. Hover a value to see which element in the copy it controls.

If Component Properties is greyed out, the component has no props yet. Add them in the main component first. See How to add editable settings to a component (props).

Option 2: Detach the instance#

1. On the canvas or in the layers tree, right-click the component instance.
2. Choose Detach Instance.

What happens:

• The copy is replaced by normal elements with the same content and design.
• On a page, the texts, images, links and colors you set for this copy in Component Properties are kept.
• Inside another component, links, colors and some texts go back to the main component's defaults. Check them after you detach.
• Content you placed in the component's slots stays in place.
• Styles you set on the instance itself move to the new top element.

Edit the detached elements like any other elements on the page. The main component and its other copies don't change.

Check that it worked#

• Component Properties: the selected copy shows the new value. Other copies on the page or on other pages still show the default.
• Detach: the outline of the former instance is blue, not purple, and you can select the elements inside it one by one.

Troubleshooting#

"Detach Instance" isn't in the menu It isn't offered when several elements are selected, when the instance is inside another component instance, when it is the whole page, or when it sits inside a Mixed Type data element. Select only the instance you want to detach. If it sits inside another component, open that component first.

"No elements inside component to detach" The component is empty. There is nothing to turn into elements.

I detached a copy by mistake Press Ctrl+Z (Cmd+Z on Mac). Or delete the detached elements and drag the component from the Components folder onto the page again.

A value appears under "Unassigned" That prop isn't connected to any element in the component. Its info icon says "Prop not linked to any element". Changing it has no visible effect until it's connected in the main component.

Good to know#

• Apart from Undo, detaching can't be reversed. A detached copy never receives updates from the main component again.
• To make a variation you'll reuse, duplicate the component instead of detaching. See How to rename, duplicate or delete a component.
• To give each copy completely different content in one area, use a slot. See How to use slots to put different content inside a component.
• The Component Properties section opens by itself when you select an instance. To keep it closed, click the Project settings cog at the bottom of the left sidebar, then under Editor click Preferences → View, and turn off Component properties section expanded by default (under Inspector and design language).