vercel-composition-patterns

Reduce boolean prop proliferation in React components by applying composition patterns. Create explicit variant components like ThreadComposer and EditMessageComposer to replace conditional logic with clear, self-contained UI elements.

Build reusable React design system APIs by implementing compound components with shared context. Lift state into context providers so UI subcomponents compose independently of state implementation details.

Use React 19 context providers for compound components by adopting the use() API over useContext and avoiding forwardRef. Wrap explicit variant components with providers to manage state cleanly.

Use explicit variant components over conditional rendering when scaling UI libraries or building complex interfaces. Variants prevent boolean prop bloat and decouple state implementation from composed UI subcomponents.

This composition pattern avoids forwardRef for React 19. It leverages modern API usage including the use() hook instead of useContext to handle context-driven state within compound components.

Refactor a React UI library by replacing boolean props with explicit variant components and provider-based state. Wrap variants with appropriate Providers and compose UI using frame, header, and input subcomponents.