The UI library for Claude Code, and how to stop it building the same landing page as everyone else

Ask Claude Code for a landing page with no other context and you will get the same landing page everyone else gets. A centered hero, a purple-to-blue gradient, three feature cards with icons, a pricing table that is almost right. It works. It also looks generated, because it was.

A better prompt does not fix this. What fixes it is giving the agent real components to reach for, so it assembles the page from code that was already designed and tested instead of improvising every div. That is the job of a UI library for Claude Code, and it is a different job from a UI library for a human.

We build Aceternity UI, so this guide uses it. The setup and the CLAUDE.md advice apply to any project, but every command below is real and you can run it today.

What a UI library needs to give Claude Code

A human browses a docs site, scrolls through previews and copies what they like. An agent can't see the previews. It needs other things:

1. Source code in your repo. If the component lives in your project, Claude can read it, see the props, and change it. A compiled package forces it to guess from training data, which may be two major versions old.
2. One command to install. Copying from a web page is where agents drop a dependency or break an import. A registry that installs files and dependencies in one step removes that class of mistake.
3. Search by intent. You say "a pricing section with a monthly/yearly toggle", not the component's file name. The agent needs a way to search for that.
4. Docs in plain text. Markdown and llms.txt files load into context cleanly. HTML pages full of navigation do not.
5. Rules it can follow. Where components live, which animation library to use, what not to touch.

Here is how Aceternity UI covers each of these, and how to set it up.

What Aceternity UI gives Claude Code

Aceternity UI is a library of animated components and full page sections built with React, Tailwind CSS and Motion. There are three layers, and Claude Code installs all of them the same way:

• 100+ free components. Backgrounds, 3D cards, spotlights, timelines, navbars, bento grids, moving cards, glowing borders.
• 200+ blocks. Complete sections: heroes, feature sections, pricing, testimonials, FAQs, CTAs, footers.
• Full pages and templates. A whole landing page installs as one page file plus one component per section, so Claude can swap the copy and keep the design.

For agents specifically:

• It is a shadcn registry under the @aceternity namespace. npx shadcn@latest add @aceternity/bento-grid puts the source in your project and installs its packages.
• It works with the shadcn MCP server, so Claude Code can search the catalog by description and read an item before it installs it.
• Every item has a Copy prompt button. It copies a brief written for an agent: the install command, the packages, the files and exports, how to check the result, and the full source. Paste it into Claude Code and it has everything it needs without opening a browser.
• There is an llms.txt and an llms-full.txt for loading the whole catalog into context.
• Everything is Motion and Tailwind. No second animation library sneaks in, and the classes match the rest of a Tailwind project.

Set up Aceternity UI in Claude Code

Four steps, about five minutes.

1. Initialize shadcn if the project has no components.json. This adds the cn helper and the CSS variables the components use:

npx shadcn@latest init
Copy

2. Add the Aceternity registry to components.json:

{
  "registries": {
    "@aceternity": "https://ui.aceternity.com/registry/{name}.json"
  }
}
Copy

3. Connect the MCP server to Claude Code:

npx shadcn@latest mcp init --client claude
Copy

This writes the server to your project's .mcp.json. Restart Claude Code and run /mcp inside it. You should see shadcn as connected.

4. Ask for the result, not the file name:

Find a pricing section in the Aceternity registry and add it to the home page.

Claude searches the registry, reads the item, installs it with the CLI and wires it into the page. Each install goes through Claude Code's normal permission prompt, so you see every command before it runs.

No MCP? It still works. Claude Code can run the CLI directly:

npx shadcn@latest search @aceternity -q "card"
npx shadcn@latest add @aceternity/3d-card
Copy

Prompts that work

The best prompts name the section and the source, then say what to change. Some that we use:

Build a landing page from the Aceternity registry: a hero with a spotlight background, a bento grid of features, infinite moving cards for testimonials, and a resizable navbar. Write the copy for my product from README.md.

Add the Aceternity timeline component to the changelog page and fill it from the entries in CHANGELOG.md.

Replace the hero on the home page with the Aceternity hero section with hub. Keep my headline and CTA.

Install the Aceternity SaaS landing page and replace the copy with my product. Do not change any Tailwind classes.

That last sentence matters. More on it below.

The Copy prompt route

Sometimes you find the component first, on the site. Open any component, block or page, click Copy prompt, choose Claude Code, and paste it into the terminal. The brief tells Claude to try the CLI first, and if that fails, to build the component by hand from the full source it includes. It also asks Claude to report every place where it had to differ from the source, so nothing changes silently.

Blocks and pages with an API key

Blocks, pages and templates come with the All-Access plan. They install through the same registry, so the Claude Code flow does not change. The registry only needs your key.

Create a key on the API key page of your dashboard, put it in .env.local (out of git), and send it from components.json:

ACETERNITY_PRO_TOKEN=your-api-key
CopySelect Language

{
  "registries": {
    "@aceternity": {
      "url": "https://ui.aceternity.com/registry/{name}.json",
      "headers": {
        "Authorization": "Bearer ${ACETERNITY_PRO_TOKEN}"
      }
    }
  }
}
Copy

The CLI and the MCP server read the variable from your environment, so the key never goes in the file. If you are signed in, the MCP page in your dashboard fills this in for you. The full walkthrough, with troubleshooting, is on the installation page.

Write a CLAUDE.md so the agent uses the library

This is the step most people skip, and it is the one that actually stops the generic-landing-page problem. Claude Code reads CLAUDE.md at the start of every session. Tell it what to reach for:

## UI
 
- Marketing sections and animated effects: the `@aceternity` registry.
  Search it before you write a new section:
  `npx shadcn@latest search @aceternity -q "<what you need>"`
- Install with `npx shadcn@latest add @aceternity/<name>`.
- Change the content and props of installed components, not their
  Tailwind classes. The classes are the design.
- Animation: Motion only, imported from `motion/react`.
  Respect `useReducedMotion()`. No CSS keyframes, no GSAP.
- Use the design tokens in `globals.css`. No hard-coded hex colors.
- After an install, run the type check and open the page.
Copy

Six lines like these do more than any prompt trick. The agent stops hand-rolling sections that already exist, and the page stops looking like three different products glued together.

Mistakes we see a lot

Letting the agent "improve" installed components. Claude likes to tidy things. If it rewrites a component's classes to match its own taste, you lose the design you installed it for. Say "content and props only" in the prompt and in CLAUDE.md.

Using framer-motion imports. Framer Motion is now Motion. The package is motion and the React import is motion/react. Older training data still suggests framer-motion, so write it down.

Adding a second animation library. Without a rule, Claude will add GSAP for one section and something else for another. Every Aceternity component uses Motion. Keep it that way.

Putting custom components in components/ui. The shadcn CLI can overwrite files there on the next add. Keep your own components somewhere else.

Skipping the check. Most failures are a missing package or a wrong import alias. Both are quick to fix when Claude checks the page right after the install, and annoying to find a day later.

FAQ

What is the best UI library for Claude Code?

For landing pages, marketing sites and product pages, a copy-paste library that installs through a registry works best, because Claude Code can search it, install it with one command and read the source it installed. Aceternity UI is built for this: 100+ free animated components plus blocks and full pages, all installable with the shadcn CLI and MCP server.

Can Claude Code install Aceternity UI components?

Yes. Add "@aceternity": "https://ui.aceternity.com/registry/{name}.json" to the registries in components.json, connect the shadcn MCP server with npx shadcn@latest mcp init --client claude, and ask Claude for the component. Or click Copy prompt on any component page and paste it into Claude Code.

Does Claude Code need an MCP server to use Aceternity UI?

No. Claude Code can run npx shadcn@latest add @aceternity/<name> like any terminal command. The MCP server helps it search by description when you do not know the component's name.

Is Aceternity UI free?

The 100+ components are free for personal and commercial projects. Blocks, full pages and templates are part of the paid All-Access plan, and they install through the same registry with an API key.

Does this work with Cursor and Codex too?

Yes. The registry and CLI do not depend on the agent. The shadcn MCP server also sets up Cursor and VS Code (--client cursor, --client vscode), and the CLAUDE.md rules above work as AGENTS.md for other agents.

Try it on your own home page

Run the four setup steps, add the CLAUDE.md block, and ask Claude Code to rebuild your home page from Aceternity components. Then put it next to the version it wrote from scratch.

Start with the free components. When you want complete sections, blocks, pages and templates install the same way.