🔘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.​

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).

   
2. Type ctrl+c or command+c on Mac, and ctrl+c on PC, to copy the component.

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

pageButtonpageLabelpageImagepageText InputpageList ViewerpageWeb ViewerpageSwitchpageSliderpageMappageAnimation by LottiepageVideopageLoading IconpageDate InputpageTime InputpagePDF ReaderpageRating

Data Viewers

While the 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:

pageData Viewer ListpageData Viewer Grid

Next Steps

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

🤖pageCore Blocks🌐pageApp Features🚀pageAdvanced App Features