Children and slots

children is a normal prop that happens to hold JSX — so the caller, not the component, supplies the content. Anything you nest between a component’s tags arrives as props.children. The component renders the chrome (border, padding, shadow) and drops children into the hole. It never has to know what is inside.

function Card({ children }: { children: React.ReactNode }) {
  return <section className="card">{children}</section>;
}

// the caller composes freely — Card knows nothing about a chart or a form
<Card>
  <h3>Revenue</h3>
  <RevenueChart range="30d" />
</Card>

React.ReactNode is the right type for “any renderable content”: elements, strings, numbers, fragments, arrays, null. You don’t enumerate what can go inside — that’s the whole point.

The alternative — a prop for every piece of content — is “prop explosion”, and it gets worse with every design request. Watch a Card try to describe its content through configuration. Each new requirement is a new prop, a new branch, and a new way for two props to contradict each other.

// rigid: the component owns WHAT the content is, via 8 config props
type CardProps = {
  title: string;
  subtitle?: string;
  bodyText?: string;
  imageUrl?: string;
  badgeText?: string;
  footerText?: string;
  ctaLabel?: string;
  onCta?: () => void;
};

function Card(p: CardProps) {
  return (
    <section className="card">
      {p.imageUrl && <img src={p.imageUrl} alt="" />}
      <h3>{p.title}</h3>
      {p.subtitle && <p className="sub">{p.subtitle}</p>}
      {p.badgeText && <span className="badge">{p.badgeText}</span>}
      {p.bodyText && <p>{p.bodyText}</p>}
      {p.footerText && <footer>{p.footerText}</footer>}
      {p.ctaLabel && <button onClick={p.onCta}>{p.ctaLabel}</button>}
    </section>
  );
}

The first time a designer wants two badges, or a body that contains a <Chart> instead of text, or a CTA that is a link — you add badgeText2, bodyNode, ctaHref, and the interface metastasizes. The component is closed: every kind of content must be anticipated and encoded in advance.

Replace the content props with children and the component reopens — the prop count collapses while flexibility goes up. Keep only the props that are genuinely the component’s own concern (its variant, its behavior), and let composition carry the content.

type CardProps = {
  variant?: "default" | "outlined";   // the card's own concern
  children: React.ReactNode;          // the content is the caller's
};

function Card({ variant = "default", children }: CardProps) {
  return <section className={`card card--${variant}`}>{children}</section>;
}

// any content, composed by the caller — no new prop ever needed
<Card variant="outlined">
  <CardImage src="/r.png" />
  <h3>Revenue <Badge>live</Badge> <Badge>beta</Badge></h3>
  <RevenueChart range="30d" />
  <a href="/reports">Open report</a>
</Card>

Two badges, a chart in the body, a link CTA — none of it required a change to Card. The component went from eight content props to zero, and it can now hold content its author never imagined. That is the payoff of an open component.

When a layout has several distinct regions, use named slots: pass JSX through named props like header and footer. A single children is perfect when content is one stream. But a dialog or a page shell has fixed positions — a header at top, a footer at bottom, the main body between — and you want the component to place each region, while the caller fills it. Named slots are just props typed as React.ReactNode.

type PanelProps = {
  header?: React.ReactNode;   // a slot: caller supplies JSX, Panel positions it
  footer?: React.ReactNode;   // another region
  children: React.ReactNode;  // the main body
};

function Panel({ header, footer, children }: PanelProps) {
  return (
    <section className="panel">
      {header && <header className="panel__head">{header}</header>}
      <div className="panel__body">{children}</div>
      {footer && <footer className="panel__foot">{footer}</footer>}
    </section>
  );
}

<Panel
  header={<h2>Settings <StatusDot ok /></h2>}
  footer={<><Button>Cancel</Button><Button variant="primary">Save</Button></>}
>
  <SettingsForm />
</Panel>

The caller still decides what each region contains (a heading with a status dot, two buttons); Panel decides where the regions go. Slots scale to multi-region layouts that a single children can’t express without the caller knowing the internal markup.