Compound Component API

Refactor a leaky Tabs component into a stable compound API with React context.

Architecture drill

You inherit Modal.jsx with 12 props: isOpen, onClose, title, footer, showClose, size, variant, primaryAction, secondaryAction, loading, trapFocus, className. Product wants flexible layout slots.

Which API shape do you recommend for long-term platform stability?

How labs work

Follow the steps in the task panel.
Edit the highlighted file — usually Tabs.jsx.
Watch the preview update as you type.
Run tests when you think you are done.
Open hints if you get stuck — they reveal one at a time.

~/playground — 01-compound-components · edit Tabs.jsx

Live

editing Tabs.jsx⌘↵ run tests

import { createContext, useContext, useState } from 'react'

const TabsContext = createContext(null)

function TabsRoot({ children, defaultTab }) {
  // TODO: provide { active, setActive } via context
  return <div>{children}</div>
}

function List({ children }) {
  // TODO: tablist wrapper
  return <div role="tablist">{children}</div>
}

function Tab({ id, children }) {
  // TODO: button that sets active tab
  return <button type="button">{children}</button>
}

function Panel({ id, children }) {
  // TODO: show panel only for the active tab id
  return <div role="tabpanel">{children}</div>
}

export const Tabs = Object.assign(TabsRoot, { List, Tab, Panel })

Preview goal: Click Tab B — only Panel B content should be visible.

Checkpoints

›Public API exports Tabs compound components only
›Clicking tabs switches visible panel
›All Sandpack tests pass