How to use the slot element in components

The slot is a special type of element available only to components.

It can be used to fill the role of a container that can easily be filled with any other element or even other components in order to extend the capabilities of your components.

Adding slots into components
Customizing the slot element
Using the slot element

Adding slots into components

To add a slot to your component, go to the Left panel, in the Elements tab. In the first section (Layout) you will find the Slot element next to Rows and columns.

Add the slot into your component by dragging and dropping to the desired location

Customizing the slot element

After adding the Slot to the component, from the Right panel you can adjust its visibility and its size.

The size of the slot has no effect on the size of the elements that will be added later. The <slot /> container you see is not real, it is there purely for usability purposes.

Once a project is deployed or exported, the slot placeholder disappears if it isn’t filled.

Using the slot element

To use the slot you need to add the component that holds the slot into the project.

Now drag and drop into the empty slot any other element or component.



The slot element does nothing inside of the component definition. so once a slot is added it is simply there until an instance of that component is added in a page or another component.

To learn more about using components in TeleportHQ check out this article.

Updated on: 12/05/2023