How to use slots to put different content inside a component

A slot in TeleportHQ is an empty area inside a component that each copy of the component fills with its own content. For example, a Card component keeps the same frame and title on every page, while its slot holds an image in one copy and a form in another. Add a Slot from Elements → Primitives → Layout while a component is open, then drag elements into the slot of each copy on your pages.

Before you start#

• Slots only work inside components. The Slot element is only listed in the Elements panel while a component is open.
• If each copy only needs different text, an image or a link, props are simpler. See How to add editable settings to a component (props).

1. Add a slot to the component#

1. Open the main component. For example, in the left sidebar → Pages, Components & Tree View, click Card in the Components folder.
2. In the left sidebar, open Elements.
3. In the Primitives tab, find Slot in the Layout group.
4. Drag Slot into the component, where the changing content should go. For example, drop it below the card title.

Shortcut: select a container in the component and press S.

In the editor, the slot shows as a placeholder box, 150px wide and 100px tall.

2. Fill the slot on each copy#

1. Open a page that uses the component, or drag the component onto a page.
2. From Elements (or from the Components folder), drag an element or a component onto the slot area of the copy. A slot drop indicator shows where it will land.
3. Release. The content now sits inside the slot of that copy only.
4. Repeat with other copies, using different content.

You can also select the slot of a copy and paste content into it with Ctrl+V (Cmd+V on Mac). Or select the copy itself on the canvas and click an element's card in Elements: the element goes into the copy's slot, after what it already holds. In a component with several slots, it goes into the first one.

Check that it worked#

In the layers tree, the content appears under the slot of that copy. Other copies of the component don't show it.

Troubleshooting#

I can't find the Slot element The Slot element is hidden while you edit a page. Open a component first.

I can't resize, style or hide the slot Slots can't be styled, copied, duplicated, hidden or turned into components. To control the size and spacing of the content, wrap the slot in a container inside the component and style that container.

I can't move or delete the slot on my page In a copy on a page, the slot itself is locked. You can only change the content inside it. To move the slot, open the main component.

The slot shows an empty box in the editor The placeholder only helps you see where the slot is while you edit. On your published site, an empty slot shows nothing. Fill it on the page, or remove the slot from the main component if you don't need it.

Good to know#

• A slot accepts any element and other components.
• When you detach a copy, the content in its slot stays in place. See How to change one copy of a component without changing the others.
• Elements inside a slot never get automatic props.
• Older help articles mention slot size and visibility settings in the right panel. These settings aren't in the editor today.