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

in the side bar.

An example view of the Component Library (v1.19), displaying the default Grid View, expanded drawers and components in the drawers.

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="" %} {% 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 Select the desired component and move the cursor over the canvas area. ### 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](https://learn.squirrel365.io/the-designer/changes-to-grouping-in-v1.19). {% endhint %} Components can be grouped in a few ways: #### 1. Ctrl + G

#### 2. Right-click menu

#### 3. Arrange Menu

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

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

{% hint style="info" %} When arranging components, the arrangement will be based on the first selected component. This is identifiable by the thicker blue bounding box around the component. {% endhint %}