# 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="understanding-the-standard-properties-of-components"><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>                                                                                                                                                                                                                                                                                                                                   |