Component libraries
Build-along · ~10 min at your own keyboard
Component libraries (21st.dev, shadcn/ui and others) ship ready-made pieces: heroes, pricing tables, testimonial blocks. Assembly usually beats invention for speed and quality — you pick the pieces, Claude wires your content through them. Before you paste code, check two things: the license lets you use it in your project (MIT and similar are fine; 'personal use only' isn't for a business), and what it depends on (extra packages, scripts loaded from other sites). Prefer pieces from one well-maintained library over a mix.
The long version: Building from components ↗
Do this
0/4Checkpoints
- ▸You should now see three chosen components from a real library.
- ▸You should now see your own content inside each one, not placeholder text.
- ▸You should now see one font stack, one color set and even spacing across the page.
The three ways this goes wrong
- The three components look like three different sites. — Ask Claude to unify fonts, colors and spacing across all three.
- Placeholder text is still showing. — Name the real text for each block when you paste the component code.
- The page loads with no styling. — The component's dependency is missing. Paste the install or script line from the library page and ask Claude to add it.
Share what happened
Paste which components you used with their license, the dependencies added, and one line on the unified result vs the blank-ask baseline.
Strip API keys, passwords, and tokens before you paste. Swap them for [KEY].
🔒 Don't paste confidential, personal-health, or payment info.