vercel-composition-patterns

To refactor React components with boolean prop sprawl, replace rigid boolean modes with explicit variants, children-based composition, and renderless patterns. This approach creates flexible APIs that are easier to extend, test, and maintain without adding more boolean props.

The compound component pattern organizes related UI pieces around shared context and clear responsibility boundaries. Use it when a component like a modal or form control needs to scale through composition rather than duplicated implementation logic or complex prop configurations.

Replace render props with composition-oriented guidance by lifting state and using context-based contracts. This allows you to build reusable React components with explicit variants and children-based composition, avoiding the deep prop drilling often associated with render props.

When building React 19 components with composition, you can avoid forwardRef in contexts where newer React 19 patterns apply. The skill provides guidance on updating APIs to leverage these newer native capabilities for ref forwarding.

Yes, applying composition-based architectures is ideal for reusable library development. It helps refactor design system controls like buttons into composable APIs that scale cleanly, replacing brittle component APIs caused by duplicated variants and prop proliferation.

The best way to lift state and create context-based contracts is to organize related UI pieces around shared context. This establishes clear responsibility boundaries, allowing flexible APIs that replace boolean modes with explicit, composable variants.