Why AI tools work

Agents read the file in your repo, not a package in node_modules. Add from the shadcn.io registry with the official CLI — Cursor, Claude, Copilot.

A packaged library hides the styles. The model sees an import and guesses. A shadcn component is a file in components/ui — open it, edit a class, that is the product.

button.tsx

button-variants.ts

dialog.tsx

components.json

The assistant sees import { Button } from "some-ui". Props maybe. Hover, variants, and focus rings live in a theme bag it cannot open.

import { Button } from "some-ui"

<Button color="primary">Save</Button>

Add it, then ask

Write the file

npx shadcn@latest add https://www.shadcn.io/r/button.json

Point the agent at the path

“Open components/ui/button.tsx and add a ghost variant.” It reads buttonVariants, not a page about theme.palette.primary.

Keep the diff

The edit is yours. There is no upstream package to fight on the next upgrade.

What the model reads

Variants are strings. hover:bg-primary/80 is the hover. No sx object to invent.

components/ui/button-variants.ts

export const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-lg text-sm font-medium",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
        outline: "border-border bg-background hover:bg-muted",
        ghost: "hover:bg-muted hover:text-foreground",
        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20",
      },
    },
  },
)

Ask for quieter and it copies ghost. Ask for red and it copies destructive.

Add the file before you ask

If components/ui/button.tsx is missing, the agent will import a package that is not in the repo. Registry first, then the prompt.

MCP

The shadcn.io MCP server lets Cursor or Claude Desktop search the catalog and install with the same URL.

npx shadcn@latest add https://www.shadcn.io/r/accordion.json

Official npx shadcn@latest. Our https://www.shadcn.io/r/{name}.json. Nothing else.

Try it on these

Button

Variants the model can copy

Dialog

"use client" already set

Form

Fields the agent can extend

Data Table

Columns it can add

Command

Items it can append

Accordion

Panels it can rename

Questions

Installation

CLI, then the registry URL

MCP

Search and install in the agent

All components

The catalog

Button

First file to add

Blocks

Larger layouts to drop in

Hooks

Behavior next to the UI

Why AI tools work

Do I have to write prompts a special way

Does this only work in Cursor

Should I still paste the docs into the chat

What happens when shadcn ships a new Button

Can I keep using a packaged library next to this

I do not have this set up yet