What is component composition?

Definition

Component composition combines reusable interface elements into more complete experiences. Layouts, slots, and nesting rules determine where components can appear and how data or interactions move between them.

In a generative system, a model can choose a supported composition for the user's intent while the application retains ownership of each component's implementation. Clear boundaries prevent invalid nesting, hidden actions, and inconsistent behavior.

ELI5

Component composition means building a screen from smaller reusable pieces. Each piece has a job, and the layout rules describe how those pieces can be grouped or placed inside one another.

For example, a product card can combine an image, a title, a price, and an approved purchase button. A model may place several cards in a comparison layout without changing how each button works.

Frequently asked questions

Why is component composition useful for generated interfaces?

It lets a model create varied layouts from tested building blocks instead of generating every visual and interactive detail from scratch.

What can go wrong with component composition?

Invalid nesting, conflicting state, duplicated actions, inaccessible reading order, or unsupported component combinations can make the result confusing or unsafe.

Videos explaining component composition