Compound Component Pattern

Compound components expose a parent + a set of child components that work together through shared internal state. The consumer controls the structure declaratively — exactly like HTML's <table> / <thead> / <tbody> / <tr> / <td>, where the browser uses the structure you declare to construct a well-behaved table — while the components themselves handle the behavior.

Sources: jjenzz.com/compound-components · patterns.dev/react/compound-pattern

Why choose compound components?

The alternative — a single "God component" driven by config props — has real costs: