Watermelon UI

Overview

Watermelon UI is an open-source React 19 UI platform designed for developers seeking striking visual craftsmanship without sacrificing maintainability. Built upon Tailwind CSS 4, Motion, and Vite, Watermelon bridges the gap between design inspiration and production delivery by offering a curated catalog of animated components, copy-paste landing page blocks, dashboard layouts, and complete templates. All components follow the shadcn-compatible registry architecture, ensuring zero runtime lock-in, while native Model Context Protocol (MCP) tooling enables seamless agent-driven code generation.

Key Features

• ⚡️ Rich Interaction & Motion: Leverages Motion to deliver physics-based micro-interactions, split accordions, fluid text transforms, and polished layout transitions.
• 🧩 Page-Ready Blocks & Showcases: Goes beyond isolated primitives by delivering entire production-grade sections, hero units, and dashboard views ready to paste into any Next.js, Vite, or Astro app.
• 📦 Zero-Lock-in shadcn Registry: Distributed via standardized registry JSON manifests, giving developers complete source code ownership with full TypeScript safety and customizability.
• 🤖 Native MCP & AI-First Design: Includes a hosted MCP server (mcp.watermelon.sh) and CLI integration for Cursor, Claude Code, and Codex, empowering AI agents to find and compose UI blocks accurately.

Installation & Quick Start

# Add components directly via the shadcn CLI
npx shadcn@latest add https://registry.watermelon.sh/r/card-split-accordian.json

import React from 'react';
import { CardSplitAccordian } from '@/components/ui/card-split-accordian';

export default function FeatureSection() {
  return (
    <section className="max-w-4xl mx-auto py-12 px-4">
      <h2 className="text-3xl font-bold tracking-tight mb-8">Dynamic Feature Showcase</h2>
      <CardSplitAccordian
        title="Polished Micro-Interactions"
        description="Built with Tailwind CSS 4 and Motion. Features smooth spring physics, responsive scaling, and full keyboard accessibility."
      />
    </section>
  );
}

Why Choose Watermelon UI?

1. Velocity Meets Visual Polish: Delivers design-agency level fidelity without requiring weeks of custom animation math or complex CSS keyframes.
2. AI-Ready Workflow: First-class MCP tooling transforms your AI assistant into an expert designer capable of selecting and assembling verified components directly into your codebase.