> 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/snap-to-place/components.md).

# 🛠️ Components

## What's a Component?

Apps contain many different features. 

On Thunkable, you get to drag & drop which features - which we call components - go into your app. 

Some features you can see. Let's call these features visible components. Examples include buttons, loading icons, and images. 

Some features you can't see. Let's call these features invisible components. Examples include sounds, timers, and databases. 

## Visible Components

![](/files/-LhquQl9QoKu3w2e3Ojw)

To put it simply, visible components are features that you can see on your app screen - like the ones pictured above.  

Visible components can be styled by size, text, space, and location. 

When adding visible components into your app, please note that they can only exist on one screen at a time. For example, if you want to add a button to three different screens, each screen will require its own button.

## Invisible Components

![](/files/-M79m9Y0dwKXDkqxMPLZ)

Invisible components are features on your app that you can't see. 

They often relate to your app's functionality, and are quietly running in the background. When you add an invisible component to your app, that component can work on any screen. 

For example, if you add a database component to your app, the database can be accessed from any screen. You do not need to add a database component to each screen. 

Invisible components are displayed underneath the mobile device on the Thunkable app builder.

## Finding Components

Components are organized into 10 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.

{% content-ref url="/pages/-LZ7M7ctX\_S7tn6eZj5n" %}
[User Interface](/snap-to-place/user-interface.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LZ7M7ckwgmW56dJdts0" %}
[Layout](/snap-to-place/layout.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LZ7M7d75hFcoQICi80U" %}
[ Image](/snap-to-place/image.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LZ7M7dGP82rIbhCXm5P" %}
[🗄️ Data](/snap-to-place/data.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LZ7M7dDmapCNhDRGi8L" %}
[Location](/snap-to-place/location.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LZ7M7dTojNTUdNMO3Gw" %}
[Monetization](/snap-to-place/monetization.md)
{% endcontent-ref %}

To find a component, you can manually scroll through the components section on the Thunkable app builder. You can also expand and collapse categories depending on your needs.

![](/files/QMMvQBsXYJVdwVWDHJi0)

The quickest way to find a component is by searching for it in the search bar. Any matching components will also be displayed as you type.

![](/files/d7GokykpwK5VQsaKAG2v)

## 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 and invisible components in your app. 

You can move components around on the component tree to change the location of a component in your app.  

Components that are nested can also be expanded and collapsed by clicking on the ▾ icon. 

<div align="left"><img src="/files/gTAEdiloTihCBayI3IIB" alt="" width="263"></div>