Nest component hierarchy

Component hierarchy is an architectural pattern that organizes UI elements in a structured, parent-child relationship. Unlike atomization which focuses on breaking things down, hierarchy focuses on how components are composed together. This structured approach helps AI systems better understand the relationships between components, their data flow patterns, and their role within the larger application structure, enabling more accurate code analysis and generation.

Example

Feature-based folder structure groups components by their feature rather than their type.

components/
├── Catalog/           # Feature
│   ├── Products/      # Sub-feature
│   │   ├── List/      # Feature module
│   │   │   ├── Grid   # Component
│   │   │   └── List
│   │   └── Filters/
│           ├── Category
│           └── Price
└── Checkout/
    └── Cart/
        ├── Summary/
        │   ├── Items
        │   └── Total
        └── Actions/
            ├── Quantity
            └── Remove

Recommendation

To implement this effectively, organize your components in directories that reflect their relationships, with parent components in root directories and child components in nested subdirectories. Follow consistent naming conventions and file structures throughout your project. Large components should focus on composition and data flow, while nested components handle specific UI elements or functionality. Document this hierarchical structure in your architectural guidelines to maintain consistency across the project.