> For the complete documentation index, see [llms.txt](https://learn.squirrel365.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learn.squirrel365.io/getting-started/adding-components.md).

# Adding components

### Adding a component

The Component library is where you will find all the UI elements you can add to your project. Open  it by clicking on the 'add icon' <img src="/files/Czm8CHfc76yMHtRmiS4l" alt="" data-size="line">  in the side bar.&#x20;

<figure><img src="/files/Dm51EG9QDx8TmrVb4O4n" alt=""><figcaption><p>An example view of the Component Library (v1.19), displaying the default Grid View, expanded drawers and components in the drawers.</p></figcaption></figure>

To add a component to your app select it in the component library and then click on the canvas in the desired location.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FoFLm0hFrBIuT87ZCiKRs%2Fadd_component.mp4?alt=media&token=d9449e00-c8e5-4827-a63c-cbccbd74156a>" %}

{% hint style="info" %}
Other methods for adding components to the canvas include double clicking (which will drop it in a default location) or drag and drop from the library to the canvas
{% endhint %}

The components are grouped into categories librayr&#x20;

Select the desired component and move the cursor over the canvas area.&#x20;

### Grouping Components

Components can be grouped on the canvas. When grouped, these components can be moved together on the canvas, as a single layer in the Component Tree.

{% hint style="info" %}
v1.19 Introduced changes to Grouping and its functionality in the product. For more information, check out [this article](/the-designer/changes-to-grouping-in-v1.19.md).
{% endhint %}

Components can be grouped in a few ways:

#### 1. Ctrl + G

<figure><img src="/files/xXADbQTW29ivkIEwXPXl" alt=""><figcaption></figcaption></figure>

#### 2. Right-click menu

<figure><img src="/files/0K02snWft86sxUPyHNWI" alt=""><figcaption></figcaption></figure>

#### 3. Arrange Menu

<figure><img src="/files/xbymqb08jYPE7p8MjSxZ" alt=""><figcaption></figcaption></figure>

### Arranging Components

Components can be arranged on the canvas based on their positions and size. When multiple components are selected, the arrange menu will be enabled.

<figure><img src="/files/J5aMhuHIt8Baml1d0QzM" alt=""><figcaption><p>From left to right: Align Left, Alight Center, Align Right, Align Top, Align Middle, Align Bottom, Distribute Horizontally, Distribute Vertically, Make Same Size, Make Same Height, Make Same Width</p></figcaption></figure>

{% hint style="info" %}
When arranging components, the arrangement will be based on the first selected component.&#x20;

This is identifiable by the thicker blue bounding box around the component.
{% endhint %}

<figure><img src="/files/lOPf8F2ClO3GnXHu3x6z" alt=""><figcaption></figcaption></figure>