Components

How to rename, duplicate or delete a component

September 15, 2026
How to rename, duplicate or delete a component

In TeleportHQ, you manage a component from the Components folder in the left sidebar. Right-click the component and choose Rename, Duplicate or Delete. Duplicating makes a separate component you can change freely. Deleting a component also removes every instance of it from all your pages, so detach the copies you want to keep first.

Before you start

  • Open the left sidebar → Pages, Components & Tree View. Components are listed in the Components folder.
  • You need the Owner, Admin or Designer role. See What can each role do?
The right-click menu of a component in the TeleportHQ Components folder, with Rename, Duplicate and Delete highlighted

Rename a component

  1. In the Components folder, right-click the component.
  2. Choose Rename. The name becomes an editable field.
  3. Type the new name, for example PricingCard.
  4. Press Enter to save, or Esc to cancel.

Shortcuts: double-click the component's row, or select it and press F2.

Duplicate a component

  1. In the Components folder, right-click the component.
  2. Choose Duplicate.

A new component appears with the same content, props and states, named with a number, for example PricingCard1. It isn't placed on any page and has no link to the original. Use it to build a variation, for example a highlighted pricing card.

Shortcut: select the component in the list and press Ctrl+D (Cmd+D on Mac).

Delete a component

  1. If you want to keep some copies on your pages, detach them first. See How to change one copy of a component without changing the others.
  2. In the Components folder, right-click the component.
  3. Choose Delete.
  4. If a confirmation appears, read it and confirm.

What happens:

  • A component that isn't used anywhere, and has no role or forms, is deleted right away, with no confirmation.
  • A component that is used shows Delete component: "All component instances will be removed too if a component is removed." Every instance on every page is removed.
  • Your navigation or footer shows Delete Navigation component or Delete Footer component, for example "This component is a Navigation component. It and all its instances will be removed."
  • A component with forms inside shows Delete Component with Forms: the forms are removed and "their submissions will no longer be available."

Shortcut: select the component in the list and press Delete or Backspace.

Check that it worked

  • A renamed or duplicated component shows its new name in the Components folder.
  • A deleted component disappears from the list, its tab closes, and its instances are gone from your pages.

Troubleshooting

A warning says the name is reserved, for example "button" is a reserved name. Using "buttonComponent" instead. Words like button, header, section, image, link, form and menu are reserved by the code TeleportHQ generates. TeleportHQ adds "Component" automatically. Pick a more specific name, like PrimaryButton.

My new name got a number added A page, another component or a reserved folder already uses that name. Pick a different name.

"The invoice component cannot be deleted. It is managed by the e-commerce feature." The invoice component belongs to your online store, so TeleportHQ doesn't let you delete, duplicate or rename it. Email templates that a feature manages can't be duplicated either ("This email template is managed by a feature and cannot be duplicated.").

"Your current role does not have permission to edit components" Ask the workspace Owner or an Admin for the Designer role.

I deleted a component by mistake Press Ctrl+Z (Cmd+Z on Mac) before you reload the page, because the undo history is lost on reload. See How to undo and redo changes. If undo isn't possible, restore an earlier backup. See How to back up and restore your project. One undo brings back the component and every copy of it on your pages, with everything inside them, and what the deletion tidied up with it: its comments, the workflows linked to it, its folder entry and the form messages that used it. It doesn't reopen the component's tab.

Good to know

  • Empty names are ignored, and spaces at the start and end are removed.
  • To group components, create folders inside Components. See How to organize pages and components in folders.
  • Deleting the component that powers your AI Assistant Chat turns off AI Assistant Chat.
Share

Related Articles

What are components, and when should I use them?

A TeleportHQ component is a reusable block, like a navigation bar, footer or card, that you design once and place on many pages; when you edit the main component, every copy updates, and each copy can still show its own text, images and links.

How to create a component

In TeleportHQ, create a component by right-clicking elements you already designed and choosing Make Component, or start a blank one with the + button on the Components folder and New Component (Ctrl+Alt+K).

How to edit a component and update every copy

In TeleportHQ, double-click a component instance (or click the component in the Components folder) to open the main component in its own tab; every change you make there updates all its copies on every page.

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

In TeleportHQ, change one copy (instance) of a component by editing its values in the Component Properties section of the right panel, or right-click it and choose Detach Instance to turn it into normal elements that no longer update with the main component.

How to undo and redo changes

In the TeleportHQ editor, click the Undo or Redo arrow above the canvas, or press Ctrl+Z and Ctrl+Shift+Z (Cmd on a Mac); undo history only covers your own changes since you opened the project.

How to organize pages and components in folders

In the TeleportHQ editor, click + on the Pages or Components folder and choose Create Folder, then drag pages or components onto it; folders only organize the editor and never change page URLs.