Component Composition
Making a component flexible by letting callers nest other components inside it, instead of piling on boolean props for every variation.
See it
What it is
Configuration says: add 'hasIcon', 'isCompact', 'showFooter', 'variant'. Composition says: expose the shape and let the caller nest the icon and the footer as real elements. The first approach grows a new prop for every request plus a giant conditional inside. The second stays roughly the same size forever.
Reach for it the moment a prop list starts describing content instead of behavior. The canonical shapes: children for the main body, named slots for regions (header, footer, actions), and compound components (Tabs, Tabs.List, Tabs.Trigger, Tabs.Panel) that share state through context so the caller controls arrangement while the parent still owns the logic. Radix Primitives and shadcn/ui are built almost entirely this way.
The trap on the other side: composition pushes assembly work onto every caller. If a dozen usages stack the same five sub-components in the same order, ship a preset wrapper on top of the composable parts. Flexible core, convenient default.
Ask AI for it
Refactor this component from boolean props to composition: remove flags like showHeader, hasIcon, and variant, and accept nested content through children plus named slots (header, footer, actions). If the sub-parts need shared state, make it a compound component (Root, Trigger, Content) sharing state through context rather than passing props through each level. Keep the public API declarative, then add one preset wrapper for the most common arrangement so simple cases stay a single line.