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

![](https://1117313960-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzMJAXNyRSI4WE3Jt4z%2F-MAesV3dmVdjTAjfmr72%2F-MAesgl0AoHtn8AAiXKj%2FComponents_panel.png?alt=media\&token=fd95a017-d2d0-4256-986d-31f497bec646)

| **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="/creating-pages/working-with-pages/working-with-page-components/understanding-the-standard-properties-of-components.md"><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>                                                                                                                                                                                                                                                                                                                                                                                                      |