# Component Basics

## Learn All About Components

Components are the building blocks of your app's design. Everything your users will interact with when using your app are considered components. These are the visual elements of your app! 

{% embed url="<https://youtu.be/9csbU8iHMvI>" %}

## Inserting Components

![Components are located in the Add Panel that appears after clicking the plus button-- to insert them, click and drag into a screen.](/files/-LiUOVatXXHyGhngYpob)

Components are all of the elements on a screen — lists, buttons, text, etc.

* **Drag and drop** components from the Add Panel onto a screen on your Canvas.
* To **copy and paste** a component from one screen to another, select and copy the component, then **click the Screen Title** of the new screen and paste it.&#x20;
* To **edit** a component, click on it and the left panel will open with all of the options to configure and customize the component.&#x20;
* If you want to **group components**, click and drag to select multiple components.  Then, in the left panel, click the "Make Group" button.
* If you want to **arrange the order of components** on a screen so that one component is above or below another, go to the Screens tab in the toolbar, and click the relevant screen to see its list of components. In that list, drag components up or down to move them closer to the front or back of the order.
* To link clicking on a component to an action or to another screen, check out our [Action Basics](/actions.md) section.&#x20;

Components can range from very simple to robust with many options. Simple components like text and shapes can be combined to create your own custom designs.

## All Components

#### [Navigation](/component-basics/screen-navigation.md)

* Tab Bar
* App Bar
* [Side Navigation](/design/designing-your-app/responsive-navigation/responsive-side-navigation.md)
* [Top Navigation](/design/designing-your-app/responsive-navigation/responsive-top-navigation.md)

#### [Lists](/component-basics/connecting-lists-and-forms-to-a-database.md)

* Simple List
* Card List
* Image List
* Avatar List
* Horizontal Card List
* Horizontal Chip List
* Custom List

#### [Buttons](/component-basics/buttons.md)

* Button
* Action Button
* Icon
* Toggle

#### [Simple](/component-basics/simple-components.md)

* Text
* [Image](/component-basics/simple-components/image-component.md)
* Eclipse
* Rectangle
* Line
* Vector
* [Web View Component](/component-basics/simple-components/webview-component.md)
* [Video Component](/component-basics/video.md)

#### Forms & Fields

* [Form](/component-basics/forms-and-fields/how-to-create-and-edit-forms-and-fields.md)
* [Text Input](/component-basics/forms-and-fields/text-input.md)
* Date Picker
* Dropdown Menu
* File Picker
* [Image Picker](/component-basics/forms-and-fields/image-picker.md)

**Marketplace Components**

* Map
* Calendar
* Image Slider
* Google Signin
* Multiselect Dropdown
* Star Rating
* Progress Bar
* YouTube
* AdMob Banner
* Stripe Kit
* Deck Swiper
* Plyr Video
* Chart Kit
* Audio Player
* Apple Sign-In
* Email Validator
* Slider
* Lottie
* QR Code Generator (by Knight)
* Countdown
* Randomizer
* NocoderHQ HTMLRenderer
* QR Code Scanner
* Calendar Stripe
* Stopwatch
* Signature Pad
* IAP Kit
* QR Code Generator (by Zeroqode)
* Magic Color Rectangle
* NocoderHQ Round Button
* Random Picker
* NocoderHQ Countdown
* Twitter Timeline
* URL Encode Decoder
* Switch
* Masked Form
* Markdown Renderer
* Jam Room


---

# 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://help.adalo.com/component-basics/component-basics.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.