21st.dev Magic MCP vs Flowbite MCP

A side-by-side comparison of two Design & Media servers — tools, transport, auth, maintenance, and copy-paste config for each.

	21st.dev Magic MCP Generate beautiful, modern UI components from natural-language descriptions inside your IDE. Unverified stdio (local) API key TypeScript	Flowbite MCP Official Flowbite MCP server: access 60+ Tailwind CSS components, generate branded themes, and convert Figma to code. Unverified stdio (local) API key JavaScript
Category	Design & Media	Design & Media
Language	TypeScript	JavaScript
Transport	stdio (local)	stdio (local)
Auth	API key	API key
GitHub stars	5.2k	37
Last commit	5 months ago	7 months ago
Verified
Actively maintained
Install	`npx @21st-dev/cli@latest install <client> --api-key <key>`	`npx flowbite-mcp`
Repo	Open	Open

Verdict

Pick 21st.dev Magic MCP if you want the official, vendor-maintained server, and you prefer the more popular, battle-tested option.

Pick Flowbite MCP if you prefer its approach (official flowbite mcp server: access 60+ tailwind css components, generate branded themes, and convert figma to code).

Add 21st.dev Magic MCP

Install / run

npx @21st-dev/cli@latest install <client> --api-key <key>

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

{
  "mcpServers": {
    "21st-dev-magic-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic@latest",
        "API_KEY=\"your-api-key\""
      ]
    }
  }
}

Add Flowbite MCP

Install / run

npx flowbite-mcp

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

{
  "mcpServers": {
    "flowbite-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "flowbite-mcp"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

FAQ

21st.dev Magic MCP or Flowbite MCP — which is better?

Pick 21st.dev Magic MCP if you want the official, vendor-maintained server, and you prefer the more popular, battle-tested option. Pick Flowbite MCP if you prefer its approach (official flowbite mcp server: access 60+ tailwind css components, generate branded themes, and convert figma to code).

Can I use both 21st.dev Magic MCP and Flowbite MCP?

Yes — MCP clients let you enable multiple servers at once. Add both configs to your client's mcpServers and use whichever tool fits the task.

Do 21st.dev Magic MCP and Flowbite MCP work with Claude, Cursor and Windsurf?

Both do. Copy the per-client config below into Claude Desktop, Cursor, or Windsurf.

View 21st.dev Magic MCP →View Flowbite MCP →More comparisons →