vercel-composition-patterns

Avoid boolean prop proliferation by replacing boolean flags with explicit variant components and leveraging composition. Refactor monolithic UIs into distinct variants like ThreadComposer and EditMessageComposer to achieve scalable and reusable React component APIs.

Share state across compound components by wrapping them with a shared context provider. This architecture pattern lifts state management up, enabling flexible UI reuse and consistent behavior across multiple apps or packages within your design system.

Refactor a React component library by introducing explicit variants and wrapping them with a shared Provider to lift state. Apply composition patterns using render props, compound components, and context providers to create scalable architectures.

Yes, the composition pattern guidance includes specific React 19 API changes. It specifies core rules around architecture patterns, state management with providers, explicit variant components, and how to apply React 19 API updates effectively.

Use explicit variant components to avoid boolean prop proliferation and create clear, predictable APIs. Use render props when you need more flexible UI reuse and custom rendering logic within your React component library or design system architecture.