The slots pattern for a PageLayout component

WHY IT EXISTS Many components own a fixed structural skeleton but need their inner regions filled with arbitrary content. A single children prop cannot express several distinct placement targets, so the slots pattern exists to let a container define named insertion points that consumers populate independently, keeping structure and styling inside the component while content stays flexible.

THE MENTAL MODEL Think of slots as labeled holes in a template. The layout decides where the header, sidebar, and main areas live and how they are styled and arranged; the consumer just drops content into each named hole. This is exactly the model behind the native HTML slot element and framework equivalents, generalized to React via named props or compound components.

HOW IT WORKS For PageLayout, one approach accepts named props, for example header, sidebar, and main, each receiving a React node, and the component renders each in its designated grid region. A more ergonomic approach uses compound subcomponents like PageLayout.Header, PageLayout.Sidebar, and PageLayout.Main; the parent reads or arranges these children into the right regions. Either way the layout owns the CSS grid that positions the regions, and unfilled slots can collapse so the layout adapts when, say, no sidebar is provided.

WHEN IT MATTERS Slots matter for any structural component with multiple meaningful regions: page shells, cards with header and footer, dialogs, and toolbars. They give consistency and encapsulated layout while letting each page supply different content, avoiding both rigid all-in-one components and uncontrolled single-children blobs.

ONE CONCRETE EXAMPLE PageLayout exposes Header, Sidebar, and Main subcomponents and lays them out with CSS Grid. A dashboard page composes a nav in Header, filters in Sidebar, and charts in Main. A settings page omits the Sidebar entirely, and the grid reflows so Main spans the freed space, all without the page touching layout CSS.