Breaking down complexity into manageable levels.
‍
UI components of medium to high complexity are constructed using a hierarchical structure of subcomponents. These subcomponents often span multiple levels, cascading from left to right. In this structure, subcomponents in the first column serve as foundational elements for those in the second column, and so forth, depending on the required levels to form the final component. For instance, let's explore the Menu component:

In the first Subcomponent column, you'll find ElemBefore subcomponents, such as icons and avatars, specifically designated for the adjacent Item subcomponent. This hierarchical approach ensures that each level builds upon the previous one, providing a scalable and modular framework for UI design.

Easy to manage and customize.
‍
The use of subcomponents enhances the manageability and customization of UI components. For example, consider the Menu component:

If you need the Item to include an Illustration as another option for ElemBefore, you simply add the Illustration variant to the ElemBefore subcomponent instead of integrating it directly into the Item itself. This approach streamlines the customization process and maintains the modular integrity of the components, making it easier to manage and adapt your designs.