MCP server

shadcn's MCP server lets a coding agent browse the blocks, search them, read their code and install them in your project. It reads the registries in your components.json, so add @dashboardblocks there once.

Set upCopy Anchor Link

Run both commands in your project, where components.json is.

Add the registry:

npx shadcn@latest registry add @dashboardblocks

Connect the MCP server to your agent. Pick your client: claude, cursor, vscode, codex or opencode.

npx shadcn@latest mcp init --client claude

This adds shadcn to your dev dependencies and writes the server to the client's config file: .mcp.json for Claude Code, .cursor/mcp.json for Cursor, .vscode/mcp.json for VS Code and opencode.json for OpenCode. For Codex, it prints the lines to add to ~/.codex/config.toml yourself. Restart the agent, or reload its MCP servers, so it picks up the server.

Ask for blocksCopy Anchor Link

Name the registry in your request, so the agent searches it:

• Show me the KPI blocks in @dashboardblocks.
• Find a block in @dashboardblocks for a checkout funnel and add it to the home page.
• Add the store dashboard from @dashboardblocks and replace its data with my orders query.

Blocks you can drop into a page end in a number, such as kpi-01 and funnel-02. Each one's description says what it shows, so a search for what you need finds them. Items without a number, such as kpi and funnel, hold the parts those blocks are built from.

Some blocks share files, such as block-state.tsx. When the agent installs a block next to one you already have, the CLI may ask whether to overwrite a shared file, which an agent can't answer. Ask it to run the add command with --overwrite.