> For the complete documentation index, see [llms.txt](https://docs.cwicly.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cwicly.com/cwicly/components/components-folders.md).

# Components Folders

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

Components Folders is more of a Components library where you can add, store, access, reorganise and delete your collection of Components Folders.

A Component can be in multiple Component Folders and you can nest as many Components in a Component Folder as necessary.

You can add as many Component Folders as you need.

## Components Folders

Components Folders can be accessed from the Components panel in the Inserter Sidebar.

* Open Components in Inserter Sidebar.
* Open Folders tab.

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

### Add Folder

This allows you to add a new Components Folder.

* Open Folders tab.
* Click "Add New Folder".

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

* This will open an "Add New Folder" modal.

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

* Input a suitable name for the Components Folder.
* Click "Create".

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

### View&#x20;

Once you have added Component Folders, they will be visible in the Components Folders panel.

* Click the required Component Folder to open.

You can choose between component view or paginated.

Drag and Drop to reorder Component Folders as required.

<figure><img src="/files/99jHfIpYlg9W05n9NgRb" alt=""><figcaption></figcaption></figure>

### Rename

This property allows you to rename a Components Folder.

* Open Folders tab.
* Click to open the required Components Folder.
* Click Components Folder name and input a suitable new name.

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

### Change Colour

A colour is automatically assigned to each Components Folder when it is created but the colour can be personalised as required.

* Open Folders tab.
* Click to open the required Components Folder.
* Open the colour picker and select a suitable colour.

<figure><img src="/files/8cNRagM0MuY22JR8al38" alt=""><figcaption></figcaption></figure>

### Add Icon

This property allows you to add an Icon to your Components Folder.

* Open Folders tab.
* Click to open the required Components Folder.
* Open the icon modal and select a library.
* Search for required icon or locate manually.

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

The chosen icon will be visible next to the Components Folder.

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

### Delete  Folder

Components Folders can be deleted if no longer required.&#x20;

{% hint style="info" %}
This will delete the Components Folder itself but not permanently delete the Components nested inside.
{% endhint %}

* Open Folders tab.
* Click to open the required Components Folder.
* Click "Delete" icon to delete Components Folder.&#x20;

<figure><img src="/files/053NmKba4JYjb1jqPXIi" alt=""><figcaption></figcaption></figure>

### Sort Folders

You can change the order of your Components Folders as required.

* Open Folders tab.
* Drag and Drop Components Folders to change the order as necessary.

![](/files/wYWUkom7oCCVsNCXNo3T)

### Return

Return allows you to leave the selected Components Folder and return to the Components Folders library.

* Click Return icon to go back to the Components Folders library.

## Components&#x20;

Components nested in a Components Folder are visible when you open a Components Folder.

* Open Folders tab.
* Click to open the required Components Folder.
* View Components nested in Folder.

<figure><img src="/files/2wW7df8brvFdO7Mu8hCy" alt=""><figcaption></figcaption></figure>

Drag and Drop Components to change the order as necessary.

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

### Add

You can add Components to a Components Folder.

* Open Folders tab.
* Click to open the required Components Folder.
* Click the "+" icon to open the "Add components to folder".

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

The "Add components to folder" modal contains a Search Bar to help you locate the component you wish to add to the open Components Folder.

* In the "Add  components to folder" modal, input component name and choose component in the dropdown.

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

The component is now displayed in the folder.

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

### Add to Page

Select or Drag components nested in a Components Folder to add to the canvas.&#x20;

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

### Sort&#x20;

Components nested in a Components Folder can be sorted to change their order within the folder.

{% hint style="info" %}
You need to activate "Sort Components" before you attempting to sort your Components otherwise the component will be added to your page by default.
{% endhint %}

* Open Folders tab.
* Click to open the required Components Folder.
* Click "Sort Components" icon to enable sorting.

<figure><img src="/files/2wW7df8brvFdO7Mu8hCy" alt=""><figcaption></figcaption></figure>

Drag and Drop Components to change the order as necessary.

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

### Delete

This allows you to remove a Component from a Components Folder.&#x20;

{% hint style="info" %}
This will delete the Components from the Folder  but not  remove the Components permanently.
{% endhint %}

* Open Folders tab.
* Click to open the required Components Folder.
* Find the Component to be deleted.
* Click "X" icon.
* Click "Remove"  to delete from Folder.

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