vercel-composition-patterns

Replace boolean props with explicit variant components and composition patterns. Create dedicated component variants (like ThreadComposer, EditMessageComposer) that compose shared primitives through a central context, eliminating conditional rendering gates and prop drilling.

Compound components are related pieces (Frame, Input, Submit) composed together under a shared provider. Context passes state and actions between them without prop drilling, enabling flexible UI assembly where each piece independently accesses shared state.

Use composition patterns with explicit variants and a generic context interface (state, actions, meta). Lift state to pluggable providers so unrelated UI pieces access shared state, and compose primitives into higher-level components for reuse across design systems.

Use composition patterns when managing multiple boolean props creates bloated APIs or tight coupling. They're essential for design systems and reusable component libraries where flexibility, readability, and scalability matter more than simple conditional rendering.

Yes. Composition patterns directly target refactoring existing codebases by replacing boolean-gated logic with explicit variants and shared context. Incrementally introduce compound components and providers to modernize component APIs without full rewrites.

Prop drilling passes data through intermediate components; context-based composition lifts state to a provider so any composed piece accesses it directly. Composition patterns eliminate the intermediate layers, reducing component complexity and coupling in large UIs.