# Container

The **Container** is a structural element used for grouping other UI elements, allowing for flexible and customizable layouts. Containers can be nested within each other to create complex UI structures.

<figure><img src="https://2973737105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAXNLyKVZ2tvtyDr8sVES%2Fuploads%2FwVBd4K73qAUmyqA7rTvm%2FContainer.gif?alt=media&#x26;token=98d82ea3-9763-409d-b0d2-2e64d6e38aae" alt="" width="259"><figcaption></figcaption></figure>

**Positioning & Layout**

* **Stacking** — Defines the stacking direction of the elements inside the Container.
* **Align elements** — Controls the alignment of elements within the Container.
* **Spacing** — Adjusts the spacing between elements inside the Container.

**Size & Layout**

* **W** — Defines the width of the Container.

* **H** — Defines the height of the Container.

* **Fixed** — Sets a fixed size in pixels.

* **Fill** — Adapts the size based on the parent element (for Containers, the parent element is the **Floating UI**).

* **Hug** — Adjusts the size according to the largest element inside it (available only for **Floating UI** and **Container** elements).

* **Padding** — Defines the horizontal and vertical padding inside the Container.

* **Corner radius** — Sets the border rounding of the Container.

#### Fill

* **Default color** — The background color of the Container. If disabled, the Container will be transparent.
* **Hover color** — The background color when hovering over the Container.

#### Stroke

* **Thickness** — Defines the stroke thickness of the Container.
* **Default color** — The stroke color of the Container. If disabled, the stroke will be transparent.
* **Hover color** — The stroke color when hovering over the Container.