# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learn.squirrel365.io/getting-started/adding-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.