# User Interface (UI) Components

## Overview​

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

## Properties Panel

Each UI component you add to your app has an associated properties panel unique to that component. Using the various settings in the properties panel, you can style and customize your Thunkable UI components to give your app personality and style that best suits your brand.

A label's properties panel is displayed on the right in the example below. Note its unique properties, such as the label's text, font, color, etc. 

<figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FJnXNJm9KiqKdmGpiTGUz%2FLabel%20%3E%20cropped%20properties%20panel.png?alt=media&#x26;token=1e455cc2-ce46-435c-a68d-47d0f77cc26c" alt=""><figcaption></figcaption></figure>

## Component Tree

The component tree can be found at the top left corner of your project's designer. The component tree contains a list of the UI components in your app. The expand and collapse arrows show or hide the nested UI components.

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MY3jwENkJCaz4mfu6gy%2F-MY3lhhgJpzF7miTd7b3%2FScreen%20Shot%202021-04-12%20at%207.31.03%20AM.png?alt=media&#x26;token=01ac5600-035b-4ea3-a794-03d905bcec6d" alt="" width="375"></div>

### Copy and Paste Components&#x20;

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:&#x20;

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.

### Delete UI Components

You can delete UI components from the component tree or the component's properties panel.

#### Delete UI Components - Component Tree

To delete a UI component from your project:

1. Hover over a component's name in the component tree.\
   ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FKrB5ey51KADzGoKZMXVd%2Fdelete%20component%20-%20component%20tree.png?alt=media\&token=6954cb21-2bda-4839-bfad-4ac13c4cb5f0)
2. Click the **trash can** icon.
3. Confirm the deletion.

#### Delete UI Components - Component's Properties Panel

To delete a UI component from your project:

1. Click on a component name in the component tree or the component within a screen in your workspace.&#x20;
2. Click the **vertical ellipsis** in the upper right of the component's properties panel.\
   ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FFNIl3AkmxPK0hhAVT8fo%2Fdelete%20component%20-%20prop%20panel.png?alt=media\&token=81379083-5682-4aee-af00-50c2809f02c2)
3. Select **Delete**.
4. Confirm the deletion.

## User Interface Components

Learn more about each of the UI components:

{% content-ref url="ui-components/basic-components" %}
[basic-components](https://docs.thunkable.com/app-design/ui-components/basic-components)
{% endcontent-ref %}

{% content-ref url="ui-components/data-components" %}
[data-components](https://docs.thunkable.com/app-design/ui-components/data-components)
{% endcontent-ref %}

{% content-ref url="ui-components/input-components" %}
[input-components](https://docs.thunkable.com/app-design/ui-components/input-components)
{% endcontent-ref %}

{% content-ref url="ui-components/media-components" %}
[media-components](https://docs.thunkable.com/app-design/ui-components/media-components)
{% endcontent-ref %}

{% content-ref url="ui-components/embed-components" %}
[embed-components](https://docs.thunkable.com/app-design/ui-components/embed-components)
{% endcontent-ref %}

{% content-ref url="ui-components/modules" %}
[modules](https://docs.thunkable.com/app-design/ui-components/modules)
{% 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/thunkable-blocks-overview" %}
[thunkable-blocks-overview](https://docs.thunkable.com/blocks/thunkable-blocks-overview)
{% endcontent-ref %}