vercel-composition-patterns

Eliminate boolean prop proliferation by replacing conditional flags with explicit variant components, compound components, and context-enabled providers. This approach documents UI variants structurally, reducing brittle APIs and hard-to-maintain conditionals in large component libraries.

The compound component pattern decouples state from UI by sharing context across sub-components. It enables flexible composition and cross-tree state sharing, allowing large React component libraries to scale without prop drilling or rigid parent-child dependencies.

Lift state into a provider interface to enable cross-tree sharing and flexible composition. This pattern uses generic context interfaces to decouple state management from UI rendering, supporting modern React 19 API usage and scalable component architectures.

Yes, these composition patterns satisfy modern React 19 API usage. They apply provider-based state lifting, generic context interfaces, and compound component designs that leverage current React features for building reusable and flexible UIs.

Structure explicit variant components as separate, dedicated components such as ThreadComposer, EditMessageComposer, or ForwardMessageComposer. Each variant wires its own provider, Frame, Input, and Submit button, documenting and constraining UI variants without boolean conditionals.

Avoid boolean props when components accumulate multiple flags creating hard-to-maintain conditionals and brittle APIs. Replace them with explicit variants and context-enabled providers when refactoring large component libraries or building reusable, flexible UIs requiring scalable composition.