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

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.codelessly.com/editor-basics/using-components.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.