> 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-library.md).

# Components Library

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

The Components LIbrary regroups all your Components.&#x20;

The Components Library is sorted by New, Old and Folders.&#x20;

You can set a List or a Grid view depending on user preference.

## Open

You can access the Components Library from the Cwicly sidebar.

* Click the Components icon to open the Components Library.

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

You will find  import and export icons, a remove icon, a Search bar, a "Sort by" selector and a list or grid view of your components.

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

## Import

You can Import a component into your Components library by uploading a suitable file.

* Click the Import icon.

<figure><img src="/files/82cCqsIFylK5F7IGGVmz" alt=""><figcaption></figcaption></figure>

The Import Components modal is where you can import Components and Folders.

* Open the Components Library.
* Click the "Import Components" icon to import Components or Folders.
* Toggle the required option(s).
* Click "Upload file" and choose the file you require.

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

## Export Components Library

You can export the entire Components library if required.

* Open the Components Library.
* Click the "Export Components" icon to export the collection.

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

## Export Individual Components

You can also export individual components.

* Open the Components LIbrary.
* Right click on the component you wish to export.
* Select "Export (file)" in the dropdown.

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

## Close

* Click the "X" icon to close the Components Library.

<figure><img src="/files/084evjodcDDoDmIQM6O0" alt=""><figcaption></figcaption></figure>

## Search Bar

You can search the Components LIbrary for a specific Component or Folder.

* Input the name of your Component or Folder in the Search Bar.

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

## Sort by

The "Sort by" property allows you to sort your Components and Folders by different categories: New, Old, Folders. You can also change between Grid and List view.

* Open the Components LIbrary.
* To sort by "New", click the New button. The Components will be displayed with the Components recently added at the top.

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

* To sort by "Old", click the Old button.
* The components will be displayed with the oldest components first.

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

* To sort by "Folders", click the Folders button.
* The components will be displayed as Folders.

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

## List View/Grid View Toggle

The List View/Grid View toggle allows you to toggle between displaying your Folders or Components in List form or Grid form as required.

### List View

* Toggle  to display as a list.

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

### Grid View

* Toggle to display as a Grid.

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

## Add to Canvas

The Components in theC omponents library can be added to the Canvass.

{% hint style="info" %}
Once the Component is added to the Canvass, it will need to be connected.
{% endhint %}

* Open the Components Library in the Cwicly Quick Inserter.
* Select Component you wish to add.

It will automatically be added to the canvas.

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

## Remove from Canvas

A component that has been added to the canvas can be removed.

* Select the component to be removed from the canvas.
* Click the "bin" icon in the toolbar to remove from canvas.

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

## Delete

Use this property to delete the component permanently.

* To permanently delete a component, hover over the component and click the "X" icon.

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

{% content-ref url="/pages/TdEcCuIapS2uj2nqR49i" %}
[Components Folders](/cwicly/components/components-folders.md)
{% endcontent-ref %}