Suggest an edit

Improve this article

Refine the answer for “What is the "Slot Pattern"?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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.*

Markdown · drag & drop images · ⌘B / ⌘I shortcuts697 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.