Beschreibung
Watermelon UI ist eine quelloffene Komponenten-Registry für React-Projekte, kein klassisches npm-Paket. Komponenten werden nicht als Laufzeit-Abhängigkeit installiert, sondern über die shadcn-CLI als Quelldateien direkt in den eigenen Projektordner kopiert, wodurch der volle Code im eigenen Repository bleibt. Der Katalog trennt zwei Subdomains: die Übersichts- und Dokumentationsseite unter ui.watermelon.sh und die eigentliche Registry mit den JSON-Beschreibungen der Komponenten unter registry.watermelon.sh. Der Bestand reicht von Primitives wie Button, Input, Card und Modal über Blocks für Hero-, Pricing-, FAQ-, Footer- und Navbar-Sections bis zu kompletten Dashboard-Vorlagen, E-Commerce-Bausteinen wie Produkt, Warenkorb und Checkout, Auth-Flows für Login, Signup und Passwort-Reset sowie Marketing-Seiten-Vorlagen und Diagramm-Komponenten. Aufgebaut ist die Bibliothek auf React 19, Tailwind CSS v4, Radix-UI-Primitives für Barrierefreiheit und Framer Motion für Animation, durchgängig in TypeScript typisiert.
Die Registry setzt React 19 voraus, weil Komponenten use()-Hooks und asynchrone Server-Components nutzen, ein Einsatz unter React 18 ist trotz einer abweichenden Angabe in der Projekt-Dokumentation, die React 18 als Minimum nennt, in der Praxis nicht zuverlässig. Ebenso vorausgesetzt wird Tailwind CSS v4 mit dessen neuer @theme-Blockstruktur und Farbtoken-Syntax, für Projekte auf Tailwind v3 ist eine Übersetzung der Styles nötig. Framer Motion muss als Peer-Dependency separat installiert werden, und da vollständige Dashboards viele Primitives mitziehen, lohnt sich nach der Installation eine Prüfung der Bundle-Größe. Zur tatsächlichen Größe des Bestands gehen die Angaben auseinander: Die Startseite wirbt mit über 600 Komponenten, das GitHub-Repository dokumentiert rund 260, aufgeteilt auf Primitives, Blocks, Dashboards und weitere Kategorien.
Watermelon UI folgt demselben Registry-Protokoll wie shadcn/ui und lässt sich über dieselbe CLI installieren, unterscheidet sich von reinen Primitive-Sammlungen aber durch die Breite an fertigen Dashboards, E-Commerce-Blocks und kompletten Anwendungs-Shells. Wer nur einzelne, kuratierte Komponenten sucht, ist mit schlankeren Registries oft schneller am Ziel, wer dagegen mehrere zusammenhängende Abschnitte für ein vollständiges Produkt braucht, spart sich mit Watermelon UI das Zusammensetzen aus Einzelteilen. Gegenüber anderen animationslastigen Registries wie Cult UI oder MagicUI überschneidet sich der Technologie-Stack, bei parallelem Einsatz mehrerer Registries im selben Projekt empfiehlt sich eine Festlegung auf eine gemeinsame Animationsbibliothek. Für Projekte, die an React 18 oder Tailwind v3 gebunden sind, ist Watermelon UI keine passende Wahl.
