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


---

# 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://docs.cwicly.com/cwicly/components/components-library.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.