Slots and Composition Patterns

The plain-language idea

children is the slot React hands you for free — whatever sits between a component's opening and closing tags. But most real layouts have more than one region: a header, a sidebar, a footer, a toolbar. You don't need a special API for that. A prop can hold JSX just as easily as it can hold a string or a number, so you pass a whole chunk of markup through a prop named for what it represents, and the component drops it in the right spot.

This is often called the "slots" pattern, borrowed from web components terminology, even though React has no dedicated slot mechanism — it's just props, used deliberately.

See it in a real thing: a page layout

function DashboardLayout({ header, sidebar, children }) {
  return (
    <div className="dashboard">
      <header className="dashboard-header">{header}</header>
      <div className="dashboard-body">
        <aside className="dashboard-sidebar">{sidebar}</aside>
        <main>{children}</main>
      </div>
    </div>
  );
}

function ReportsPage() {
  return (
    <DashboardLayout
      header={<TopNav user={currentUser} />}
      sidebar={<ReportsFilterPanel />}
    >
      <ReportsTable />
    </DashboardLayout>
  );
}

header and sidebar are ordinary props — React doesn't treat them any differently than a title string prop. The only thing making them feel like "slots" is that DashboardLayout knows to render them in specific positions, and the caller supplies JSX instead of primitives. children fills the one remaining, unnamed region — the main content — because that's the slot every layout wants to be the ergonomic default for.

What people usually miss

Watch out

• This isn't a special React feature — it's just JSX as a value. <Foo bar={<Baz />} /> works for the same reason <Foo bar={42} /> does: JSX expressions are just objects (React.createElement calls under the hood), and objects can be passed as props like anything else.
• Slots don't require children at all. A component can skip children entirely and take three or four named JSX props instead, if there's no single "obvious" default region. Don't force a layout into children + slots when it's really just three peer regions.
• The component receiving a slot prop still controls where and whether it renders. Passing sidebar doesn't guarantee a sidebar appears — the layout component can conditionally render it (e.g. hide it on a prop being undefined), which is exactly why this pattern composes so well for layouts with optional regions.

The genealogy: props were always this general

This pattern doesn't need new machinery because props were never restricted to primitives — a prop is just a value passed at the call site, and JSX is a value like any other. The insight that "children is a prop too" is the same one this lesson builds on for named slots, just applied to the one prop every component gets implicitly instead of one you declare yourself.