shads.app docs

Connect Claude Code to shads

One command. Set up the shads.app MCP server in Claude Code, check the connection, and use it to install shadcn/ui themes.

Install

Or run:

claude mcp add --transport http shads https://mcp.shads.app

Or edit the config file by hand:

.mcp.json (project) or ~/.claude.json (user)

{
  "mcpServers": {
    "shads": {
      "type": "http",
      "url": "https://mcp.shads.app"
    }
  }
}

Project scope is shareable; Claude Code expands ${VAR} references so the key stays in your environment.

Add your API key (optional)

Skip this for public themes. Pro adds your saved themes and AI generation.

Create a key in Account settings → API keys (Pro plan). Keep it out of git.

Export SHADS_API_KEY in your shell profile, then use:

claude mcp add --transport http shads https://mcp.shads.app --header "Authorization: Bearer $SHADS_API_KEY"
{
  "mcpServers": {
    "shads": {
      "type": "http",
      "url": "https://mcp.shads.app",
      "headers": {
        "Authorization": "Bearer ${SHADS_API_KEY}"
      }
    }
  }
}

Check that it works

Run /mcp inside Claude Code, or `claude mcp list` in a terminal.

Then ask your assistant:

Use the shads MCP server and run connection_status.

It returns the server version, whether your API key was accepted, and which tools are unlocked.

Try it

  • Use shads to install the Workspace theme in this repo.
  • Use shads to list the starter themes.
  • Use shads to validate this theme.json.

More jobs: recipes.

Troubleshooting

  • shads does not appear in /mcp. Restart Claude Code after adding it, and check the scope you added it to (`claude mcp list`).

More general fixes: MCP troubleshooting. Vendor documentation: Claude Code MCP docs (checked 2026-10-19).