Component Composition (Children)

Passing nested content using the children prop.

Sometimes you want to pass entire blocks of JSX inside a component, just like standard HTML elements.

<Card>
  <h2>Title</h2>
  <p>Welcome to BrowserCode!</p>
</Card>

React automatically passes the nested content in a special prop called children.

function Card({ children }) {
  return (
    <div className="shadow-lg p-6 bg-white rounded-xl">
      {children}
    </div>
  );
}

This is incredibly useful for building layout wrappers!