Best UI library for Claude Code and Cursor

What agents get wrong

The best UI library for an AI coding agent is one the agent can search, read and install without guessing: a registry to install from, an MCP server to query, plain-text docs, and typed props it can rely on.

Without those, a coding agent writes components from memory. The result usually compiles, but it invents props, skips keyboard handling and drifts from your design. The fix is not a smarter prompt. It is giving the agent a source of truth it can look up.

What makes a library agent-friendly

1. A registry the CLI can install from. A shadcn-compatible registry turns “add a date picker” into one command that also pulls in dependencies, instead of a paste from a web page.
2. An MCP server. It lets the agent search by intent and read a component before using it. Look at what the tools return: a name list is useful, usage guidance and props are better.
3. llms.txt and a full-text version. A small index for discovery and a single file for loading the whole library into context.
4. Markdown for every component. One URL per component that an agent or you can paste into a chat, with no page chrome.
5. Typed, documented props. The agent should be able to check a prop exists before it writes it, and the docs should say when not to use a component.
6. Rules it can follow. Tokens, themes, motion and accessibility rules in a skill or an AGENTS.md file, so generated screens look like one product.

How the libraries compare

Most of these libraries now have the basics: an install path, an MCP server and llms.txt. The difference is depth. Some servers return documentation and code, some return only a component list, and some are limited to a paid plan or an API key. Read the tool descriptions before you commit to one, and try the prompt you actually use.

How Arc does it

Arc is built around the checklist above, and its docs are written for an agent to read.

• Registry. Every free item is a shadcn registry item in the @uiarc namespace. The registry index is public, and items install into an arc/ folder with relative imports.
• MCP server. A remote, read only server at https://uiarc.dev/api/mcp with five tools: search_components, list_components, get_component, get_install_command and get_skill. Sign in with a free Arc account the first time you connect.
• Usage guidance. get_component returns when to use a component and when not to, its props, keyboard behavior, accessibility, motion and responsive notes, and the install command. Components with specific agent advice also have a Notes for AI section.
• Plain-text docs. llms.txt, llms-small.txt and llms-full.txt index the library, and every component page has a markdown version at /components/<name>/markdown.
• An agent skill. It teaches the agent when to reach for Arc and the rules to follow: semantic tokens, sentence case copy, a reduced motion branch for every animation, and a review checklist.
• Typed props and tokens. Components are TypeScript with documented props, and styling goes through CSS variables, so generated code themes correctly in light and dark.

Arc has 161 components and 91 blocks, and 110 components and 22 blocks are free. The Pro items need a plan, and the MCP server returns Pro source only to signed-in Pro accounts. The registry guide and the AI docs go deeper.

Set it up in Claude Code and Cursor

Setup takes four steps. They work the same way for any shadcn-compatible registry.

1. Add the registry

Run npx shadcn@latest init if the project has no components.json, then add the namespace.

{  "$schema": "https://ui.shadcn.com/schema.json",  "registries": {    "@uiarc": "https://uiarc.dev/r/{name}.json"  }}

2. Connect the MCP server

In Claude Code, run the command below. In Cursor, add the server to .cursor/mcp.json. VS Code and Codex use the same URL.

# Searches Arc by intent and reads components before installingclaude mcp add --transport http arc https://uiarc.dev/api/mcp # Optional: the Arc skill, with design rules and a review checklistnpx shadcn@latest add https://uiarc.dev/r/arc-skill.json

{  "mcpServers": {    "arc": {      "url": "https://uiarc.dev/api/mcp"    }  }}

3. Tell the agent to use it

Put the rule where the agent reads it on every task: CLAUDE.md, AGENTS.md or Cursor rules.

## UI components - Use Arc (the @uiarc shadcn registry) before writing a component.  Search with the Arc MCP server, read the component, then install it with  npx shadcn@latest add @uiarc/<name>.- Use documented props only. Do not copy Pro source; point to /pricing.- Keep a reduced motion branch for every animation and check light and  dark themes before you finish.

4. Ask for the job, not the markup

Build a workspace settings page with Arc. 1. Search the Arc MCP server for a profile form, notification   switches and a destructive "remove member" action. Read each   component before you use it.2. Install what you choose with the shadcn CLI. Do not write your   own version of anything Arc already has.3. Use only documented props and the semantic color tokens.4. When you are done, list what you used and check the page in   light and dark themes at 375 px wide.

Then read the diff. Check that it installed from the registry instead of rewriting a component, that the props it passed exist, and that the page works with the keyboard and in both themes.

Which to pick

• You want primitives and your own design: shadcn/ui, with its official MCP server.
• You are building a landing page: Magic UI or Aceternity UI, both of which have MCP servers.
• You want variety: 21st.dev and its MCP server, which needs an API key.
• You prefer a package you install from npm: HeroUI, Mantine or MUI, each with an MCP server for its docs.
• You are building product screens and want the agent to read usage guidance first: Arc. Compare it side by side on the comparison pages.

For a deeper look at the other options, see Best React component libraries in 2026.

Frequently asked questions