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
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 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 /></s> container you see is not real, it is there purely for usability purposes.
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.
To learn more about using components in TeleportHQ check out this article.
Updated on: 28/03/2025
Thank you!