vercel-composition-patterns

Refactor React component libraries by replacing boolean-driven flags with explicit variant components, compound components, and shared context providers to reduce branching logic and improve cross-team consistency.

Build reusable React component APIs by adopting compound components with a shared context provider, which lifts state away from individual props and allows UI pieces to work with different state backends.

Compound components use context providers in React to share state across UI pieces without prop drilling, enabling flexible component architectures and allowing different state backends to drive the same UI elements.

Yes, this React composition pattern works with React 19 APIs by using the new use() hook over useContext and avoiding forwardRef, ensuring explicit variant components align with modern context-driven architecture standards.

Use explicit variant components instead of boolean props when scaling React UI libraries to document intent clearly, reduce conditional branching logic, and maintain cross-team consistency across complex component architectures.