children is a special prop: whatever you nest between opening and closing tags. It enables flexible layouts—shells, panels, and slots—without prop explosion.
Patterns
function Panel({ title, children }: { title: string; children: React.ReactNode }) {
return (
<section>
<h2>{title}</h2>
{children}
</section>
);
}
<Panel title="Notes">
<p>Any JSX can go here.</p>
</Panel>Composition vs configuration
Prefer passing JSX as children or named slots (header={...}) over dozens of boolean props like showFooter, footerText, footerIcon.
Self-check
- What is the type of
childrenin TypeScript? - When would you use a named prop instead of
children?