What are components, and when should I use them?

A component in TeleportHQ is a reusable block, such as a navigation bar, a footer or a product card, that you design once and place on as many pages as you like. Each placed copy is called an instance. When you change the main component, every instance updates. Each instance can still show its own text, image or link through component properties (props).

When to use a component#

Use a TeleportHQ component when the same block appears in more than one place:

• A navigation bar and a footer that should look the same on every page.
• A card repeated with different content, for example a "Team member" card with a different photo and name each time.
• A call-to-action banner you want to update once and see everywhere.

Don't make a component for a block that appears only once. Copy and paste is fine for one-off variations. See How to copy, paste and duplicate elements.

Components are similar to components in Figma or symbols in Sketch.

Main component and instances#

Every TeleportHQ component has two sides:

• The main component lives in the Components folder of the Pages, Components & Tree View panel in the left sidebar. It opens in its own canvas tab, on a checkerboard background.
• Instances are the copies placed on pages or inside other components. On the canvas, an instance has a purple outline instead of the usual blue one.

Inside an instance on a page you can't move, style or delete the elements one by one. You change them in the main component, and the change reaches every instance. You can still style the instance as a whole, for example give it a margin.

Sites made with the AI Website Builder already use components: the navigation, the footer and the logo are components. When you pick a Navbar or Footer design from Elements → Sections, it also becomes a component, placed on every page. See How to add ready-made sections.

Make each instance different#

TeleportHQ gives you three ways to vary instances:

• Props (component properties): editable settings such as a heading text, an image or a link. You add them in the main component, then change them per instance in the Component Properties section of the right panel. See How to add editable settings to a component (props).
• Slots: an empty area in the component where each instance can hold different elements, for example a form in one card and an image in another. See How to use slots to put different content inside a component.
• Detach: break the link for one instance. It becomes normal elements you can edit freely, and it no longer updates. See How to change one copy of a component without changing the others.

Everything you can do with components#

• How to create a component: start blank, or turn a section you designed into a component.
• How to edit a component and update every copy
• How to rename, duplicate or delete a component
• How to change one copy of a component without changing the others
• How to add editable settings to a component (props)
• How to use slots to put different content inside a component
• How to use states in a component: for example, an FAQ item that opens and closes.
• How to mark a component as your navigation, footer or logo
• How to copy elements and components to another project

Who can create and edit components#

• In a shared workspace, the Owner, Admin and Designer roles can create, edit and delete components. The Editor role and the viewer roles can't.
• A project on a trial can hold up to 1,000 components. Paid plans have no component limit. When a workspace's plan has expired, no new components can be created. When you reach the limit, TeleportHQ shows "You reached the maximum number of components allowed in a project."

Good to know#

• Components have no thumbnails in the Components list. Use clear names, for example PricingCard.
• A component with no instances shows an info icon with the tooltip "Component is not used".
• With a component open, the button above the top right of the canvas reads Component settings (on a page it reads Page settings). It holds the component's Props and State.
• Components that a feature created, such as a blog's article card or a store's product card, can be restyled with Refine. See How to restyle generated login, blog or store components with "Refine".