> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.teleporthq.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to use the slot element in components

**The slot is a special type of element available only to components. It gives additional versatility 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.

|    |    |    |
| --- | --- | --- |
| [1. Adding slots into components](#2-adding-slots-into-components) | [2. Customizing the slot element](#2-customizing-the-slot-element) | [3. Using the slot element](#2-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 /></s> 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**. 


![Using the slot element in TeleportHQ](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/slot-element_1opym3.gif)

|| 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](/en/article/components-basics-16tgsqk/).