# Container Components

{% hint style="info" %}
&#x20;Containers are components that work as boxes, allowing you to quickly and easily group elements together inside.&#x20;
{% endhint %}

### What are containers used for? <a href="#id-278b25c7-3ff2-47d3-9168-30903e05a5df" id="id-278b25c7-3ff2-47d3-9168-30903e05a5df"></a>

* Grouping together components inside of a parent component
* Displaying text on top of an image
* Displaying data as the user types it

### How do I add them? <a href="#d86fe902-bf2d-4e2c-aee9-81a3c05eabb0" id="d86fe902-bf2d-4e2c-aee9-81a3c05eabb0"></a>

Simply create a new component, give it a key and select "Component Container" as the component type.&#x20;

In order to add components inside of the container, you need to type the key of the container in the "Parent Container Key" field.

### Common use cases:

* Display the name and card details in a credit card as the user types.
* Display an uploaded image with a chat as a background.
* Display a receipt containing the information that the user selected.
* Display an envelope or package with the shipping information of the user.
* And many more!
