║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: MCP description: How to use the Registry MCP with Animate UI.

import { CodeTabs } from '@/components/docs/code-tabs'; import { Tabs, TabsList, TabsTrigger, TabsContents, TabsContent, } from '@/components/radix/tabs';

For more information about the MCP server, please refer to the shadcn/ui MCP documentation.

Automatic configuration

Select your MCP client and follow the instructions to configure the shadcn MCP server.

<Tabs defaultValue="claude"> <TabsList> <TabsTrigger value="claude">Claude Code</TabsTrigger> <TabsTrigger value="cursor">Cursor</TabsTrigger> <TabsTrigger value="vscode">VS Code</TabsTrigger> </TabsList> <TabsContents> <TabsContent value="claude" className="h-[100px]"> <CodeTabs lang="bash" codes={{ pnpm: `pnpm dlx shadcn@latest mcp init --client claude`, npm: `npx shadcn@latest mcp init --client claude`, yarn: `yarn shadcn@latest mcp init --client claude`, bun: `bunx --bun shadcn@latest mcp init --client claude`, }} /> </TabsContent> <TabsContent value="cursor" className="h-[100px]"> <CodeTabs lang="bash" codes={{ pnpm: `pnpm dlx shadcn@latest mcp init --client cursor`, npm: `npx shadcn@latest mcp init --client cursor`, yarn: `yarn shadcn@latest mcp init --client cursor`, bun: `bunx --bun shadcn@latest mcp init --client cursor`, }} /> </TabsContent> <TabsContent value="vscode" className="h-[100px]"> <CodeTabs lang="bash" codes={{ pnpm: `pnpm dlx shadcn@latest mcp init --client vscode`, npm: `npx shadcn@latest mcp init --client vscode`, yarn: `yarn shadcn@latest mcp init --client vscode`, bun: `bunx --bun shadcn@latest mcp init --client vscode`, }} /> </TabsContent> </TabsContents> </Tabs>

Manual configuration

Install the shadcn package as a dev dependency:

<CodeTabs lang="bash" codes={{ pnpm: pnpm add -D shadcn@latest, npm: npm install -D shadcn@latest, yarn: yarn add -D shadcn@latest, bun: bun add -D shadcn@latest, }} />

Use the code below to configure the shadcn MCP server in your editor.

<CodeTabs lang="json" codes={{ 'Claude Code': // Copy and paste the code into .mcp.json { "mcpServers": { "shadcn": { "command": "npx", "args": ["shadcn@latest", "mcp"] } } }, Cursor: // Copy and paste the code into .cursor/mcp.json { "mcpServers": { "shadcn": { "command": "npx", "args": ["shadcn@latest", "mcp"] } } }, 'VS Code': // Copy and paste the code into .vscode/mcp.json { "mcpServers": { "shadcn": { "command": "npx", "args": ["shadcn@latest", "mcp"] } } }, Windsurf: // Copy and paste the code into .codeium/windsurf/mcp_config.json { "mcpServers": { "shadcn": { "command": "npx", "args": ["shadcn@latest", "mcp"] } } }, }} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║