Watermelon UI

by Watermelon

Hundreds of React components, blocks and dashboards to copy, with an MCP server for your agent.

MIT FreeOpen source

View on GitHub →

What it does

Animated components, page sections, dashboards, templates
Install with the shadcn command, or copy and paste the code
Its free, keyless MCP server lets your agent search and add components

! The adoption figures claimed by the site (100,000+ users, 600+ components) are not independently verified.

Install it

Requirements: A React project with Tailwind CSS. For the MCP: Claude Code, Codex or Cursor.

Install a component with the CLI (official guide)

https://ui.watermelon.sh/cli

Connect its MCP server to Claude Code

claude mcp add --transport http watermelon https://mcp.watermelon.sh/mcp

Connect its MCP server to Codex

codex mcp add watermelon --url https://mcp.watermelon.sh/mcp

The prompt for your agent

Paste it into your coding agent: it checks the requirements and installs it for you.

Claude CodeCodexCursorGemini CLIopencode

Prompt

Install Watermelon UI (https://ui.watermelon.sh/) on my machine.
1. Check the requirements: A React project with Tailwind CSS. For the MCP: Claude Code, Codex or Cursor. If anything is missing, tell me before installing anything.
2. Follow the official method:
- see https://ui.watermelon.sh/cli
- Connect its MCP server to Claude Code: claude mcp add --transport http watermelon https://mcp.watermelon.sh/mcp
- Connect its MCP server to Codex: codex mcp add watermelon --url https://mcp.watermelon.sh/mcp
3. Check that it works, then explain how to launch it and where to start.

Always review what your agent is about to run, especially install commands.