Component Composition

Agent Workflow (MANDATORY)

Before implementation, use TeamCreate to spawn 3 agents:

• fuse-ai-pilot:explore-codebase - Check existing composition patterns

• fuse-ai-pilot:research-expert - React 19 composition patterns

After: Run fuse-ai-pilot:sniper for validation.

Overview

Pattern Use Case Complexity

Children Simple containers Low

Slots Named regions Medium

Compound Related sub-components Medium

Render Props Custom rendering High

Quick Reference

Children Pattern

function Card({ children }: { children: React.ReactNode }) { return <div className="bg-surface rounded-2xl p-6">{children}</div>; }

Slots Pattern

function Card({ header, footer, children }: CardProps) { return ( <div className="bg-surface rounded-2xl"> {header && <div className="px-6 py-4 border-b">{header}</div>} <div className="p-6">{children}</div> {footer && <div className="px-6 py-4 border-t">{footer}</div>} </div> ); }

Compound Components

function Card({ children, variant }) { return ( <CardContext.Provider value={{ variant }}> <div className="bg-surface rounded-2xl">{children}</div> </CardContext.Provider> ); }

Card.Header = ({ children }) => <div className="px-6 py-4">{children}</div>; Card.Body = ({ children }) => <div className="p-6">{children}</div>; Card.Footer = ({ children }) => <div className="px-6 py-4">{children}</div>;

// Usage <Card> <Card.Header>Title</Card.Header> <Card.Body>Content</Card.Body> </Card>

Polymorphic Components

function Button<T extends React.ElementType = "button">({ as, children, ...props }: ButtonProps<T>) { const Component = as || "button"; return <Component className="btn" {...props}>{children}</Component>; }

// Usage <Button as="a" href="/link">Link</Button>

Validation Checklist

[ ] Appropriate pattern for complexity [ ] TypeScript props properly typed [ ] displayName set on forwardRef [ ] Max 2-3 composition levels

Best Practices

DO

• Use children for simple nesting

• Use slots for named regions (max 3-4)

• Forward refs for form elements

• Set displayName

DON'T

• Over-engineer simple components

• Create deep nesting (max 2 levels)

• Forget TypeScript types

• Skip ref forwarding