24 lines
1.1 KiB
Markdown
24 lines
1.1 KiB
Markdown
|
## 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
|
||
|
|
|
||
|
|
---
|