Slot Pattern in React

┌─────────────────────────────────┐
│  Card (shell)                   │
│  ┌───────────────────────────┐  │
│  │ header slot  ← consumer   │  │
│  ├───────────────────────────┤  │
│  │ content slot ← consumer   │  │
│  ├───────────────────────────┤  │
│  │ footer slot  ← consumer   │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

<Modal
  showHeader
  showFooter
  headerTitle="Delete item"
  renderBody={() => <p>Are you sure?</p>}
  renderFooter={() => <button>Confirm</button>}
/>

<Modal>
  <Modal.Header>Delete item</Modal.Header>
  <Modal.Body>Are you sure?</Modal.Body>
  <Modal.Footer>
    <button type="button">Confirm</button>
  </Modal.Footer>
</Modal>

import type { ReactNode } from 'react'
 
type PanelProps = {
  children: ReactNode
  className?: string
}
 
export function Panel({ children, className = '' }: PanelProps) {
  return <section className={`rounded-lg border bg-white p-4 shadow-sm ${className}`}>{children}</section>
}

// Consumer — full control of inner markup
<Panel>
  <h2 className="text-lg font-bold">Notifications</h2>
  <p className="text-sm text-neutral-600">You have 3 unread messages.</p>
  <button type="button" className="mt-2 text-blue-600">
    View all
  </button>
</Panel>

import type { ReactNode } from 'react'
 
type PageLayoutProps = {
  header?: ReactNode
  sidebar?: ReactNode
  children: ReactNode
  footer?: ReactNode
}
 
export function PageLayout({ header, sidebar, children, footer }: PageLayoutProps) {
  return (
    <div className="flex min-h-screen flex-col">
      {header && <header className="border-b px-6 py-4">{header}</header>}
 
      <div className="flex flex-1">
        {sidebar && <aside className="w-64 shrink-0 border-r p-4">{sidebar}</aside>}
        <main className="flex-1 p-6">{children}</main>
      </div>
 
      {footer && <footer className="border-t px-6 py-4 text-sm text-neutral-500">{footer}</footer>}
    </div>
  )
}

<PageLayout header={<AppHeader />} sidebar={<NavLinks />} footer={<Copyright />}>
  <DashboardContent />
</PageLayout>

type ModalProps = {
  open: boolean
  onClose: () => void
  header?: ReactNode
  footer?: ReactNode
  children: ReactNode
}
 
export function Modal({ open, onClose, header, footer, children }: ModalProps) {
  if (!open) return null
 
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" role="dialog" aria-modal="true">
      <div className="w-full max-w-md rounded-lg bg-white shadow-xl">
        {header && (
          <header className="flex items-center justify-between border-b px-4 py-3">
            <div className="font-bold">{header}</div>
            <button type="button" aria-label="Close" onClick={onClose}>
              ×
            </button>
          </header>
        )}
        <div className="px-4 py-4">{children}</div>
        {footer && <footer className="flex justify-end gap-2 border-t px-4 py-3">{footer}</footer>}
      </div>
    </div>
  )
}

import type { ReactNode } from 'react'
 
type SlotMap = Record<string, ReactNode>
 
type BlockLayoutProps = {
  slots: SlotMap
  order?: string[]
}
 
export function BlockLayout({ slots, order }: BlockLayoutProps) {
  const keys = order ?? Object.keys(slots)
 
  return (
    <article className="space-y-4">
      {keys.map((key) =>
        slots[key] ? (
          <div key={key} data-slot={key}>
            {slots[key]}
          </div>
        ) : null,
      )}
    </article>
  )
}

// CMS block — editor defines which slots exist
<BlockLayout
  order={['hero', 'body', 'cta']}
  slots={{
    hero: <img src="/banner.jpg" alt="Launch" className="rounded-lg" />,
    body: (
      <>
        <h2>New feature release</h2>
        <p>Ship faster with slot-based layouts.</p>
      </>
    ),
    cta: (
      <button type="button" className="rounded bg-black px-4 py-2 text-white">
        Get started
      </button>
    ),
  }}
/>

type CardSlots = {
  media?: ReactNode
  title?: ReactNode
  description?: ReactNode
  actions?: ReactNode
}
 
type CardProps = {
  slots: CardSlots
}
 
export function Card({ slots }: CardProps) {
  return (
    <div className="overflow-hidden rounded-lg border">
      {slots.media && <div className="aspect-video bg-neutral-100">{slots.media}</div>}
      <div className="p-4">
        {slots.title && <h3 className="font-bold">{slots.title}</h3>}
        {slots.description && <p className="mt-1 text-sm">{slots.description}</p>}
        {slots.actions && <div className="mt-4 flex gap-2">{slots.actions}</div>}
      </div>
    </div>
  )
}

<Toolbar left={<BackButton />} center={<SearchInput />} right={<UserMenu />} />

<Tabs defaultTab="overview">
  <Tabs.List>
    <Tabs.Tab id="overview">Overview</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel id="overview">Content…</Tabs.Panel>
</Tabs>

type FieldProps = {
  label?: ReactNode
  icon?: ReactNode
  error?: ReactNode
  children: ReactNode
}
 
function Field({ label, icon, error, children }: FieldProps) {
  return (
    <label className="block space-y-1">
      {label && <span className="text-sm font-medium">{label}</span>}
      <div className="relative flex items-center">
        {icon && <span className="absolute left-3 text-neutral-400">{icon}</span>}
        <div className={icon ? 'pl-10' : ''}>{children}</div>
      </div>
      {error && <span className="text-sm text-red-600">{error}</span>}
    </label>
  )
}
 
// Usage
;<Field label="Email" icon={<MailIcon />} error={errors.email}>
  <input type="email" className="w-full rounded border px-3 py-2" />
</Field>

type Column<T> = {
  key: keyof T
  header: ReactNode
  cell?: (row: T) => ReactNode
}
 
function DataTable<T extends { id: string }>({ rows, columns }: { rows: T[]; columns: Column<T>[] }) {
  return (
    <table>
      <thead>
        <tr>
          {columns.map((col) => (
            <th key={String(col.key)}>{col.header}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {rows.map((row) => (
          <tr key={row.id}>
            {columns.map((col) => (
              <td key={String(col.key)}>{col.cell ? col.cell(row) : String(row[col.key])}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  )
}

'use client'
 
import type { ReactNode } from 'react'
 
type ToolbarProps = {
  left?: ReactNode
  center?: ReactNode
  right?: ReactNode
}
 
export function Toolbar({ left, center, right }: ToolbarProps) {
  return (
    <div className="flex flex-wrap items-center gap-2 border-b px-4 py-2">
      <div className="flex min-w-0 flex-1 items-center gap-2">{left}</div>
 
      <div className="hidden flex-1 justify-center md:flex">{center}</div>
 
      <div className="flex shrink-0 items-center gap-2">{right}</div>
 
      {/* Mobile — center slot moves below */}
      {center && <div className="w-full md:hidden">{center}</div>}
    </div>
  )
}

<Toolbar
  left={
    <>
      <button type="button" aria-label="Back">
        ←
      </button>
      <h1 className="truncate font-semibold">Project Alpha</h1>
    </>
  }
  center={<input placeholder="Search…" className="w-full max-w-xs rounded border px-3 py-1" />}
  right={
    <>
      <button type="button">Share</button>
      <button type="button">Settings</button>
    </>
  }
/>

'use client'
 
import type { ReactNode } from 'react'
 
type ToastSlots = {
  icon?: ReactNode
  title?: ReactNode
  message?: ReactNode
  action?: ReactNode
}
 
type ToastVariant = 'success' | 'error' | 'info'
 
type ToastPayload = {
  id: string
  variant: ToastVariant
  slots: ToastSlots
}
 
const variantStyles: Record<ToastVariant, string> = {
  success: 'border-green-500 bg-green-50',
  error: 'border-red-500 bg-red-50',
  info: 'border-blue-500 bg-blue-50',
}
 
function ToastItem({ toast, onDismiss }: { toast: ToastPayload; onDismiss: (id: string) => void }) {
  return (
    <div
      role="alert"
      className={`flex items-start gap-3 rounded-lg border-l-4 p-4 shadow ${variantStyles[toast.variant]}`}>
      {toast.slots.icon && <div className="shrink-0">{toast.slots.icon}</div>}
      <div className="min-w-0 flex-1">
        {toast.slots.title && <p className="font-bold">{toast.slots.title}</p>}
        {toast.slots.message && <p className="text-sm">{toast.slots.message}</p>}
      </div>
      {toast.slots.action}
      <button type="button" aria-label="Dismiss" onClick={() => onDismiss(toast.id)} className="shrink-0">
        ×
      </button>
    </div>
  )
}

// Trigger from anywhere — slot-based payload
function SaveButton() {
  function handleSave() {
    showToast({
      id: crypto.randomUUID(),
      variant: 'success',
      slots: {
        icon: <span aria-hidden>✓</span>,
        title: 'Saved',
        message: 'Your changes are live.',
        action: (
          <button type="button" className="text-sm underline">
            Undo
          </button>
        ),
      },
    })
  }
 
  return (
    <button type="button" onClick={handleSave}>
      Save
    </button>
  )
}