## 21 · Component Playground

Interactive code-and-preview blocks are the page's primary content. Each block previews a thing and shows how to copy-paste it.

- **Heading:** category labels (`Buttons`, `Forms`, `Cards`, `Layouts`).
- **Body:** alternating preview-and-code blocks, often with a tab to switch frameworks.
- **Divider:** category bands; horizontal rules between examples.
- **Button:** "Copy" button on every code block (silent success).
- **Image:** none — the previews ARE the imagery.
- **Reveal:** none.

Reach for it for design systems, component libraries, code-snippet sites, framework documentation.

Avoid for marketing pages. Playground is utility, not pitch.

Reference: shadcn/ui, Tailwind UI, Once UI, MUI demos, Framer Motion examples.

**Sample opening lines** (imitate the *specificity* — Component Playground openings are tangible: open on a real example, not a claim):
> *"Try it inline. Then take it home."* — two short imperatives
> *"Every example is editable. Every output is real."* — pairs claim with proof
> *"From `npm install` to your first chart in eight lines."* — names the step count, makes a concrete promise

---
