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

# UI Components

Components to interact with

​UI Components make up the visual aspect of your **User Interface**. Combine, style and customize Thunkable UI components to give your app personality and style that best suits your brand.​

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-Mi4Uta94Fh3kkSofUPW%2F-Mi4aGHcE5mbYWCuVQzV%2Fimage.png?alt=media\&token=8ef5c2fa-1015-426d-a256-efeb64648202)

Every UI component has unique properties that you can use to customize it. You can find this at the top of the **Properties panel**. All UI components have a section called **Layout** and **Style**.‌

In the example above, a **Label** has been selected. Note its unique properties such as its text, font, alignment etc.

### Copy and paste components 

Once you’ve perfected a UI component on the Design tab of a drag and drop project, you can duplicate it using copy-and-paste keyboard shortcuts.

To copy and paste a component: 

1. Click on a component name in the component tree (A) or the component within a screen in your workspace (B).<br>

   <figure><img src="https://lh6.googleusercontent.com/u-6CMjS6Fm-JDNhxsBeVM0ZRvhHUQdaafaeYLTkkX74NV-7Myc1eVKz8ljWce8SslmZyrnjgs-COKFzlDzlk9457vG-cS2RFi2FPl4WCYEB72Cfwl8Rk1-Yi-svdrGBWkSFuJhMvBJvxOV6wpTWqeRRKcgKvqU-o3omZbOxOw2d-YPf1Zoyn0BYA8A" alt=""><figcaption></figcaption></figure>
2. Type **ctrl+c** or **command+c** on Mac, and **ctrl+c** on PC, to copy the component.&#x20;
3. Type **ctrl+v** or **command+v** on Mac, and **ctrl+v** on PC, to paste a duplicate of the component.
4. Click and drag the new component to position it as you desire.

Learn more about individual components below.

## User Interface Components

{% content-ref url="/pages/-LZ7M7cu5YUM8tROWizB" %}
[Button](/~/changes/wHhkjLVeheBnfbpghRnw/button.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LZ7M7cv7TjcLzky0D3Q" %}
[Label](/~/changes/wHhkjLVeheBnfbpghRnw/label.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LZ7M7d8Fw4HT8jo9QGE" %}
[Image](/~/changes/wHhkjLVeheBnfbpghRnw/image-1.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LZ7M7cw2eMP3S2K9qcs" %}
[Text Input](/~/changes/wHhkjLVeheBnfbpghRnw/text-input.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LZ7M7cyCzI8Ehm6k5CW" %}
[List Viewer](/~/changes/wHhkjLVeheBnfbpghRnw/list-viewer.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LZ7M7cxWwN2dxPqhClS" %}
[Web Viewer](/~/changes/wHhkjLVeheBnfbpghRnw/web-viewer.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MYEEYT0EHs543OEYtHs" %}
[Switch](/~/changes/wHhkjLVeheBnfbpghRnw/switch.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LZ7M7d-YbtREveHwbWr" %}
[Slider](/~/changes/wHhkjLVeheBnfbpghRnw/slider.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LZ7M7dE3677OQnBMnGK" %}
[Map](/~/changes/wHhkjLVeheBnfbpghRnw/map.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LZ7M7dCWo0UsCPBa-ld" %}
[Animation by Lottie](/~/changes/wHhkjLVeheBnfbpghRnw/lottie.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LrQf5PQV\_oNYFoPrOVz" %}
[Video](/~/changes/wHhkjLVeheBnfbpghRnw/video.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LbP0rwZgxy\_DHjGS2Tm" %}
[Loading Icon](/~/changes/wHhkjLVeheBnfbpghRnw/loading-icon.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LnPKwIA\_F-jEZIfJCRp" %}
[Date Input](/~/changes/wHhkjLVeheBnfbpghRnw/date-input.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LnPL-YR8d8krt3CXiJ7" %}
[Time Input](/~/changes/wHhkjLVeheBnfbpghRnw/time-input.md)
{% endcontent-ref %}

{% content-ref url="/pages/-Lo2uawCQOCF3JARSmVr" %}
[PDF Reader](/~/changes/wHhkjLVeheBnfbpghRnw/pdf-reader.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MGxGcb6WATXunIQAREz" %}
[Rating](/~/changes/wHhkjLVeheBnfbpghRnw/rating.md)
{% endcontent-ref %}

## Data Viewers

While the [Data Viewers](/~/changes/wHhkjLVeheBnfbpghRnw/data-viewers.md) have their own section in these docs, they are visible components as you can view them on the screen. You can access the Data Viewer docs below:

{% content-ref url="/pages/-M0Iz4G7zRNg7qOgQ5U0" %}
[Data Viewer List](/~/changes/wHhkjLVeheBnfbpghRnw/data-viewer-list.md)
{% endcontent-ref %}

{% content-ref url="/pages/-M0IzFX1cY6f\_XkJZ\_1A" %}
[Data Viewer Grid](/~/changes/wHhkjLVeheBnfbpghRnw/data-viewer-grid.md)
{% endcontent-ref %}

## Next Steps

Once you have designed the UI you want, you can start adding functionality to your app with blocks and app features!

{% content-ref url="/pages/-LZ7M7dVwUHvYu\_FWD9-" %}
[Core Blocks](/~/changes/wHhkjLVeheBnfbpghRnw/blocks.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MJWO4coM8RyGpy9zXCF" %}
[App Features](/~/changes/wHhkjLVeheBnfbpghRnw/app-features.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MYKTBEiE-2O47gzrRK4" %}
[Advanced App Features](/~/changes/wHhkjLVeheBnfbpghRnw/advanced-app-features.md)
{% endcontent-ref %}