> For the complete documentation index, see [llms.txt](https://docs.cloudio.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cloudio.io/creating-pages/working-with-pages/working-with-page-components/understanding-the-components-panel.md).

# Understanding the components panel

In the ***component panel,*** following tabs are visible:

![](/files/-MAesgl0AoHtn8AAiXKj)

| **Tab**        | **Description**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Tree**       | <p>You can view the skeletal (tree) structure of all the components added to the page, as per hierarchy.</p><p><em>By default, <strong>page</strong> is the first component that is visible in the tree. All other components are added only to the page.</em></p>                                                                                                                                                                                                                                                                                                                                |
| **Properties** | <p>You can view and edit the properties of the components added. As per their functionality, you can change their properties to suit the UI of your application.<br>For example, for a Card Header, you can select an icon and the background color, whereas for a Slide Toggle component, you can set the component position.</p><p><em>The properties under the <strong>Standard</strong> section are common to all the components. Refer to</em> <a href="/pages/-MHWbdwnlpYX050w6vQz"><em><strong>Understanding the standard properties of components</strong></em> </a><em>section.</em></p> |
| **Components** | You can view and add the components available under the selected component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| **DS**         | <p>You can view the attributes of the table added to the data source linked to the datastore. You can also select and add the attributes to certain components.</p><p><em>If a data source is not linked to the datastore, you can view the list of all existing data sources.</em></p>                                                                                                                                                                                                                                                                                                           |