# JS/CSS Components

JS/CSS components are JavaScript and CSS libraries you may need to include to your project such as jQuery, jQuery mobile and Onsen UI.

In order to add a JavaScript/CSS library, please do as follows:

1. From the Monaca Cloud IDE, go to **Configure → JS/CSS Component Settings**.
2. `JS/CSS Components` page will open. You can see several libraries listed there. If you can’t find the library you want, input the library’s name in a search box to find it.

![](/files/-MffKIp96y0bTMWzVMB0)

3\. Assuming you are searching for Angular, a list of matched libraries will be shown after clicking the **Search** button.

![](/files/-MffKNpkI6jwHJU_KWwL)

4\. Click the **Add** button to include the library you prefer. Then, you can choose which version of the library to include in your project.

![](/files/-MffKQqEMnHJhPe2UPxM)

5\. Select which files of the library you want to include and click **Save**.

![](/files/-MffKUdXJ3nV8qbiFl5J)

6\. After that, you will find your newly added library in the list. Click the **Configure** button when you want to change the library’s version or selected file(s).

![](https://docs.monaca.io/images/monaca_ide/manual/dependencies/components/configure_component.png)

When a library is added, its files are added into the `www/components` folder. The following JavaScript and CSS files will also be automatically updated. These files will always be presented regardless of which libraries are added into your project:

| File Name    | Description                                                   |
| ------------ | ------------------------------------------------------------- |
| `loader.js`  | A JavaScript file used by Monaca to load JavaScript libraries |
| `loader.css` | A style sheet file used by Monaca to load CSS libraries       |

![](https://docs.monaca.io/images/monaca_ide/manual/dependencies/components/component_files.png)

Therefore, libraries can be loaded by simply referencing the two files (as shown above) in the HMTL file. More specifically, all you need to do is to include the following descriptors within the `<head>` tag of the HTML file.

```markup
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
```

{% hint style="info" %}
The `loader.js` file also loads the `cordova.js` file.
{% endhint %}

{% hint style="info" %}
If you would like to use images within your libraries, you can directly load the image files from the `components` folder.
{% endhint %}


---

# 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://en.docs.monaca.io/products_guide/monaca_ide/dependencies/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.
