vercel-composition-patterns

To reduce boolean prop proliferation in React, replace complex conditional props with explicit variant components like ThreadComposer or EditMessageComposer. This Skill guides you in building scalable UI primitives using compound components and context providers.

The best way to manage shared state across compound components is through provider-driven state management. By lifting state into context providers, you avoid prop drilling and enable flexible composition of reusable UI components across different providers.

Yes, this composition patterns approach works with React 19. It enforces modern React 19 API practices for context usage and ref handling, ensuring your component library architecture remains compatible with the latest framework updates.

To use explicit variants instead of boolean props for UI primitives, create distinct component variants like ForwardMessageComposer. You then compose Frame, Input, and Footer elements within a shared provider to replace complex boolean prop configurations.

You should use context providers for React composition when building component libraries that rely on compound components. Provider-driven state management lifts state to avoid prop drilling and enables flexible composition of UI components across different contexts.