🛠️ Components and Features

Features and functions for your app

What's a Component?

Components are the building blocks of your Thunkable app. They can help your app look a certain way or have a certain functionality.
UI Components (User Interface Components) are components which you can see on the screen. Examples include buttons, loading icons, and images.
Thunkable also offer interactivity for App Features. These App Features offer control of mobile specific functions as well as non-UI components. Examples include sounds, timers, camera, and sensors to name a few.

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.
Each 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 font, color, 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. 1.
    Click on a component name in the component tree (A) or the component within a screen in your workspace (B).
  2. 2.
    Type ctrl+c or command+c on Mac, and ctrl+c on PC, to copy the component.
  3. 3.
    Type ctrl+v or command+v on Mac, and ctrl+v on PC, to paste a duplicate of the component.
  4. 4.
    Click and drag the new component to position it as you desire.

App Features

App Features are features offer non-UI functionality.
They often relate to your app's functionality, and are quietly running in the background. Add App Features in the Blocks tab of your project.

Finding Components

Components are organized into 8 different categories. For a more detailed description of each category and an outline of the components they contain, click on one of the pages below.
To find a component, you can look in the Add Components section on the Thunkable app builder. You can also expand and collapse categories depending on your needs.
You can use the Search bar to search for components.

The Component Tree

The component tree can be found at the top left corner of your screen, just below your project name. The component tree contains a list of the visible components in your app.
Components that are nested can also be expanded and collapsed by clicking on the ▾ icon.