# Using Components

<div data-full-width="true"><figure><img src="/files/V5EJuSOprcEb81yLkDA6" alt=""><figcaption><p>Components Library</p></figcaption></figure></div>

Codelessly has a wide range of pre-built, high quality and highly customizable components that you can directly use in your layouts to quickly build UIs. These components are available in the components library.

### Components

Here's a list of all the available components.

* Icon
* Button
* TextField
* Checkbox
* Switch
* Radio
* Slider
* App Bar
* Navigation Bar
* Scaffold
* Floating action button
* Divider
* Loading Indicator
* List Tile
* Expansion Tile
* Accordion
* List View
* Page View (Carousel)
* Tab Bar
* Embedded Video
* Embedded Web View
* Progress Bar
* External Component

Click on this `+` button in the tools panel on the left of the editor to open components library.

<div data-full-width="true"><figure><img src="/files/f3AnnkEACLESvjT48jFW" alt=""><figcaption><p>How to open components library.</p></figcaption></figure></div>

You can drag & drop any component you want directly to the canvas from components library.

<div data-full-width="true"><figure><img src="/files/UDIWEGgkLVpeVIwB2JRy" alt=""><figcaption><p>Drag and drop components</p></figcaption></figure></div>

All these components support full customization of how they look and function. To access component properties, select a component and click on the floating `Settings` button right next to it.

<div data-full-width="true"><figure><img src="/files/HH5y7NuBuEhFISPjaE0P" alt=""><figcaption><p>Accessing component settings</p></figcaption></figure></div>

You can alternatively click on `Open` button in Component Settings banner at the top of the properties panel on the right.

<div data-full-width="true"><figure><img src="/files/kfrk9jRQV1Y677oqasRw" alt=""><figcaption></figcaption></figure></div>

This opens up the component settings panel. This panel contains an interactive preview of the component at the top which provides visual aid while customizing them.

<div data-full-width="true"><figure><img src="/files/qznq6I0IHOi5GHHGEJZu" alt=""><figcaption><p>Button Settings panel</p></figcaption></figure></div>


---

# 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.codelessly.com/editor-basics/using-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.