canvas-component-composability

Decompose React Canvas components by applying a slots-first approach that maps props to small child components, establishing clear boundaries between layout, content, and behavior to improve reuse and scalability.

Slot-driven composition in Canvas component design defines specific areas via component.yml to enable flexible, reusable components without relying on deep prop trees, aligning with Canvas' slot and child composition rules.

Apply a decomposition-first pattern when UI components are growing too large or require clear boundaries between layout, content, and behavior, such as when managing complex article headers, metadata sections, and card collections.

Extract repeated UI patterns into standalone Canvas components by outlining the component's slots and mapping them to small child components, creating reusable pieces like article-meta, metadata-item, and card sections.

Yes, you can apply this slots-first approach to existing Canvas components by mapping their props to slots, which helps reduce deep prop trees and aligns the components with Canvas' composition rules for better maintainability.

No external dependencies are required to implement this decomposition pattern in React projects, as it focuses on defining slots via component.yml and applying decomposition-first design rules natively.