# Using Components

<div data-full-width="true"><figure><img src="https://3474078512-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx4NeiXalJWaOaV6tsK5f%2Fuploads%2Fma1hvttX2g7vVRASl2Oz%2Fimage.png?alt=media&#x26;token=21797768-8aaf-4384-9d67-c07499d486b2" 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="https://3474078512-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx4NeiXalJWaOaV6tsK5f%2Fuploads%2FV3kDtHz5k3u8IEDuj3VT%2Fimage.png?alt=media&#x26;token=b0653744-5a36-4200-bad5-fee90204b707" 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="https://3474078512-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx4NeiXalJWaOaV6tsK5f%2Fuploads%2FxmLubo2NDTkZGWw8ZDbf%2Fezgif.com-video-to-gif.gif?alt=media&#x26;token=8fad7865-04f5-412e-b5a8-bc78c4c1235e" 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="https://3474078512-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx4NeiXalJWaOaV6tsK5f%2Fuploads%2F4zyCA03rh9D13UQr5wP5%2Fimage.png?alt=media&#x26;token=d7d44aa6-6dd8-43ed-94a1-93aa9255ff58" 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="https://3474078512-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx4NeiXalJWaOaV6tsK5f%2Fuploads%2Fgh0GCjpIkp65W7JW0Roe%2Fimage.png?alt=media&#x26;token=8684478e-261b-4173-bba6-39aa26cc5649" 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="https://3474078512-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx4NeiXalJWaOaV6tsK5f%2Fuploads%2FM3ke7Latzug3F3xQD7Xm%2Fimage.png?alt=media&#x26;token=46673a4c-de1b-45f6-ab65-f2b9efc6a726" alt=""><figcaption><p>Button Settings panel</p></figcaption></figure></div>