Description
Watermelon UI is an open source component registry for React projects, not a classic npm package. Components are not installed as a runtime dependency but copied as source files directly into your project folder through the shadcn CLI, which means the full code stays in your own repository. The catalog splits across two subdomains: the overview and documentation site at ui.watermelon.sh, and the actual registry with the JSON descriptions of the components at registry.watermelon.sh. The inventory ranges from primitives such as button, input, card, and modal, through blocks for hero, pricing, FAQ, footer, and navbar sections, to complete dashboard templates, e-commerce building blocks such as product, cart, and checkout, auth flows for login, signup, and password reset, plus marketing page templates and chart components. The library is built on React 19, Tailwind CSS v4, Radix UI primitives for accessibility, and Framer Motion for animation, fully typed in TypeScript throughout.
The registry requires React 19, because components use use() hooks and asynchronous server components; using it under React 18 does not work reliably in practice, despite the project's own documentation listing React 18 as the minimum. Tailwind CSS v4 is equally required, with its new @theme block structure and color-token syntax, so projects on Tailwind v3 need a style translation first. Framer Motion must be installed separately as a peer dependency, and because complete dashboards pull in many primitives, it is worth checking the bundle size after installation. The actual size of the inventory is disputed between sources: the homepage advertises more than 600 components, while the GitHub repository documents around 260, split across primitives, blocks, dashboards, and further categories.
Watermelon UI follows the same registry protocol as shadcn/ui and installs through the same CLI, but differs from pure primitive collections through the breadth of ready-made dashboards, e-commerce blocks, and complete application shells. Anyone looking for a handful of curated components alone is often faster with a leaner registry; anyone who needs several connected sections for a complete product saves the work of assembling them from individual pieces with Watermelon UI. Its technology stack overlaps with other animation-heavy registries such as Cult UI or MagicUI, and when using several registries in the same project it is worth standardizing on a single animation library. For projects locked to React 18 or Tailwind v3, Watermelon UI is not the right choice.
