Ask Claude Code for a pricing section and you get one: competent, plausible, and invented. It is invented because the model has no catalogue to reach into and no way to check whether your project already has a component that does the job. Both of those are fixable, and the fix is the same one.
What the agent is missing
Three things, in order of how much they cost you.
A catalogue. Without one, every component is written from memory. The output compiles, looks fine in isolation, and shares nothing with the rest of your product.
Your own components. The expensive failure in an existing codebase is not a bad component, it is a duplicate one. An agent that cannot see your button writes a fourth.
A way to show you before writing. A diff is a bad medium for reviewing a visual decision. Previews are the difference between reviewing a choice and reviewing a file.
Connecting a catalogue
The 21st MCP gives Claude Code a search tool over the catalogue and an install tool that runs the shadcn CLI. Setup is one command against any MCP client, and after that the agent can search components, show previews inline and write the files.
The same key works from the CLI, which matters for the cases where you want the install scripted rather than conversational.
Connecting your own components
The higher-value half in an existing project. Publish your team's components to a private registry and point the agent at it: the team registry guide covers the shape, and the payoff here is specific - the agent installs your button instead of writing one.
If you are not ready for a registry, the cheap version is a CLAUDE.md that names where components live, which primitives to use, and what the token names are. It is worse than a registry and much better than nothing.
Prompting for interface work
Four habits that change the output more than any model setting.
Name the constraint, not just the thing. "A pricing section with three tiers and a monthly toggle, no animation library, server component compatible" eliminates most of a catalogue. "A pricing section" does not.
Ask for options before code. "Show me four hero sections that use CSS rather than video" returns previews to choose from. Letting the agent pick and write in one step means reviewing a file instead of a decision.
Give it your tokens. If the agent knows your CSS variables, it adapts the installed component in the same step rather than leaving you a second pass.
Tell it to check first. "Look for an existing component before writing one" is a sentence that pays for itself in any codebase older than a month.
What still needs you
The agent will not notice that the component it installed has no focus-visible state, that its animation ignores reduced motion, or that its dark mode was generated rather than designed. Those checks are the review checklist, and they are the same ones a borrowed component needs.
It also will not decide whether the dialog should have been a page, whether the carousel should have been a list, or whether the empty state needed a demo. The catalogue answers what exists; the judgement is yours.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| 21st MCP | Search and install with inline previews, from the editor | Installs need a membership |
A CLAUDE.md convention file | Telling the agent where things live, for free | It is instructions, not a catalogue |
| A team registry | The agent installing your components instead of new ones | Somebody has to publish them |
| The agent alone | Genuinely bespoke work with no precedent | Everything is invented and nothing is reviewed |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue.
Frequently asked
- How do you give Claude Code a component catalogue?
- Connect an MCP server that exposes search and install tools. The 21st MCP does this in one setup command for any MCP client, after which the agent can search the catalogue, show previews inline and write the files through the shadcn CLI rather than inventing a component from memory.
- How do you stop an agent writing duplicate components?
- Give it your own components. A private registry the agent can read is the strongest version, so it installs your button rather than writing a fourth. The cheap version is a conventions file naming where components live, which primitives to prefer and what the tokens are, plus a prompt line telling it to look before writing.
- What should a prompt for a component include?
- The constraint as well as the thing, since no animation library and server component compatible eliminate most of a catalogue and neither can be inferred. Ask for options before code, give it your token names so adaptation happens in the same step, and tell it to check for an existing component first.
- What does an agent with a catalogue still get wrong?
- The same gaps as any borrowed component: a missing focus-visible state, an animation with no reduced-motion branch, a generated dark mode. And every judgement call, such as whether the dialog should have been a page. The catalogue answers what exists, not what the screen should be.