> 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>