vercel-composition-patterns

Avoid boolean prop proliferation in React components by refactoring monolithic structures into explicit variants and compound components. This pattern enforces clear API intent and reduces complex conditional rendering logic.

Build scalable React component libraries using composition by designing compound components that share state via context providers. This architecture enables flexible UI composition without deep prop drilling.

The best way to refactor a monolithic React component is to split it into explicit variant components and a shared context provider. This migration eliminates boolean props and enables flexible composition.

Yes, you can use React 19 APIs for context-driven component architecture. The skill provides specific guidance on applying React 19 API usage when designing compound components and context providers.

Use compound components when you need reusable UI pieces that share state implicitly via a provider pattern. Use explicit variants when you need dedicated component types to document intent and reduce conditional logic.

Yes, this composition pattern works for large React codebases. It provides migration guidance specifically for refactoring large codebases and building reusable UI libraries to ensure scalable architectures.