# UI Components

​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="button" %}
[button](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/button)
{% endcontent-ref %}

{% content-ref url="label" %}
[label](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/label)
{% endcontent-ref %}

{% content-ref url="image-1" %}
[image-1](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/image-1)
{% endcontent-ref %}

{% content-ref url="text-input" %}
[text-input](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/text-input)
{% endcontent-ref %}

{% content-ref url="list-viewer" %}
[list-viewer](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/list-viewer)
{% endcontent-ref %}

{% content-ref url="web-viewer" %}
[web-viewer](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/web-viewer)
{% endcontent-ref %}

{% content-ref url="switch" %}
[switch](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/switch)
{% endcontent-ref %}

{% content-ref url="slider" %}
[slider](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/slider)
{% endcontent-ref %}

{% content-ref url="map" %}
[map](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/map)
{% endcontent-ref %}

{% content-ref url="lottie" %}
[lottie](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/lottie)
{% endcontent-ref %}

{% content-ref url="video" %}
[video](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/video)
{% endcontent-ref %}

{% content-ref url="loading-icon" %}
[loading-icon](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/loading-icon)
{% endcontent-ref %}

{% content-ref url="date-input" %}
[date-input](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/date-input)
{% endcontent-ref %}

{% content-ref url="time-input" %}
[time-input](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/time-input)
{% endcontent-ref %}

{% content-ref url="pdf-reader" %}
[pdf-reader](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/pdf-reader)
{% endcontent-ref %}

{% content-ref url="rating" %}
[rating](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/rating)
{% endcontent-ref %}

## Data Viewers

While the [Data Viewers](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/data-viewers) 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="data-viewer-list" %}
[data-viewer-list](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/data-viewer-list)
{% endcontent-ref %}

{% content-ref url="data-viewer-grid" %}
[data-viewer-grid](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/data-viewer-grid)
{% 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="blocks" %}
[blocks](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/blocks)
{% endcontent-ref %}

{% content-ref url="app-features" %}
[app-features](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/app-features)
{% endcontent-ref %}

{% content-ref url="advanced-app-features" %}
[advanced-app-features](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/advanced-app-features)
{% endcontent-ref %}