21st.dev Magic

Name: 21st.dev Magic
Author: 21st-dev

21st-dev

Create crafted UI components inspired by design engineers

Features

ui-componentsdesignreact

Quick Install

npx -y @modelcontextprotocol/server-21st-dev-magic

Configuration

Config file location:

~/Library/Application Support/Claude/claude_desktop_config.json

config.json

{
  "mcpServers": {
    "21st-dev-magic": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-21st-dev-magic"
      ]
    }
  }
}

Step 1: Copy the configuration above

Step 2: Open or create the config file at the path shown above

Step 3: Merge with existing config (add to mcpServers object) or replace if new

Step 4: Restart your Claude Desktop application

Links

GitHub Repository

21st-dev/magic-mcp

Details

Author: 21st-dev
Type: Community
Category: UI Components