What is the "Slot Pattern"?

ReactJunior~3 min read

Definition

The Slot Pattern is an architectural technique where a component defines slots (content-insertion points), and the parent code passes JSX for each slot through dedicated props.

In other words:

The component builds the structure, and the user fills it with content.

Example (intuitively)

Say we have a modal window. It always consists of:

a header,
content,
a footer (with buttons).

If we hard-code everything inside the component, it can't be reused. The solution is to use "slots".

Implementing the Slot Pattern

javascript

function Modal({ header, body, footer }) {
  return (
    <div className="modal">
      <div className="modal-header">{header}</div>
      <div className="modal-body">{body}</div>
      <div className="modal-footer">{footer}</div>
    </div>
  );
}

// Usage
<Modal
  header={<h2>Delete account?</h2>}
  body={<p>This action cannot be undone.</p>}
  footer={<button>Yes, delete</button>}
/>

The Modal component defines the structure, and the outer code inserts content into the "slots": header, body, footer.

This is the Slot Pattern.

Why it's useful

Problem	How the Slot Pattern solves it
A component needs to be flexible	Lets you insert different pieces of content
Structure needs to be preserved	The component defines the frame, the user fills it in
Styles and layout need to be controlled	Markup stays fixed inside, content changes from the outside
`children` can't be used for several areas	Each slot is a separate `prop`

Example: a card with several slots

javascript

function Card({ image, title, description, actions }) {
  return (
    <div className="card">
      <div className="card-image">{image}</div>
      <div className="card-content">
        <h3>{title}</h3>
        <p>{description}</p>
      </div>
      <div className="card-actions">{actions}</div>
    </div>
  );
}

// Usage:
<Card
  image={<img src="/shirt.jpg" alt="Shirt" />}
  title="Linen shirt"
  description="100% linen, Italy"
  actions={<button>Add to cart</button>}
/>

The Card component guarantees a consistent layout, but the slot content is fully controlled from the outside.

An alternative: the React children API

If you need more control, you can let people pass child elements with "labels":

javascript

function Card({ children }) {
  const slots = React.Children.toArray(children);
  const image = slots.find(c => c.type === Card.Image);
  const actions = slots.find(c => c.type === Card.Actions);
  const content = slots.find(c => c.type === Card.Content);

  return (
    <div className="card">
      <div>{image}</div>
      <div>{content}</div>
      <div>{actions}</div>
    </div>
  );
}

Card.Image = ({ children }) => <>{children}</>;
Card.Content = ({ children }) => <>{children}</>;
Card.Actions = ({ children }) => <>{children}</>;

// Usage:
<Card>
  <Card.Image><img src="/shirt.jpg" /></Card.Image>
  <Card.Content><h3>Linen shirt</h3></Card.Content>
  <Card.Actions><button>Buy</button></Card.Actions>
</Card>

This is already Slot Pattern + Compound Components, where each part is defined by a "named subcomponent".

Where the Slot Pattern is used

Area	Example
Layout components	`<Page header={...} sidebar={...} content={...} />`
UI libraries	`Modal`, `Dialog`, `Card`, `Tooltip`, `Dropdown`
Design Systems	A fixed structure with configurable slots
Compound Components	As a way to name different content areas

Comparison with other patterns

Pattern	What it does	Difference
Children	Passes one piece of JSX inside	Only one "slot"
Slot Pattern	Several "named" insertion points	More flexible than `children`
Compound Components	Nested components tied together by logic	Slot Pattern is structural, Compound is behavioral
Render Props / Function as Child	Share data via a function	The Slot Pattern isn't about data, it's about UI structure

Summary

What	Description
Idea	The component defines "slots", the user inserts content
Implementation	Via props (`header`, `footer`, `actions`) or subcomponents
Goal	Separate structure from content while keeping flexibility
Example	`<Modal header={...} body={...} footer={...} />`
Uses	Layouts, Cards, Dialogs, Compound UI
Key phrase	"I define where, you decide what"

The main idea: The Slot Pattern is a way to give the user flexibility in filling components, while keeping control over the structure and a consistent style.

The component says: "here are my slots - header, body, footer", and you decide what to put in each one.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.