Lesson 19 — Compound components

Components that belong together

Compound components are a family of small components used together, like Card, Card.Title and Card.Body. Because a function is also an object in JavaScript, you can attach the parts to it as properties. The result reads like HTML and is easy to rearrange.

Card.Title = ({ children }) => <h3>{children}</h3>;
<Card><Card.Title>Hi</Card.Title></Card>

Note: Next.js pages are React components, so this preview runs your code with plain React in the browser. Next.js-only features (the file router, server rendering, data fetching on the server) are not running here — where a lesson needs them, it shows a small simulation instead.

Why it matters: UI kits (shadcn/ui, Radix, MUI) are built with this pattern.