# Watermelon UI

> Technical, animated landing templates installed through the shadcn CLI

Category: Landing page templates (https://aiarabicdev.com/landing-pages)
Canonical page: https://aiarabicdev.com/landing-pages/watermelon-ui
Tags: shadcn, motion, template, dark, react

Watermelon UI publishes complete landing page templates and animated components as shadcn registry items, so a whole page arrives as files in your repository rather than a dependency. The house style is dark, monospaced and heavy on crosshairs and hairline rules. This site runs on its landing-01 template.

## Facts

- Licence: MIT
- Language: TypeScript
- Cost: Free and open source
- Self hostable: yes
- Added: 2026-08-23
- Last checked: 2026-08-23

## Links

- Website: https://ui.watermelon.sh
- Source: https://github.com/WatermelonCorp/watermelon-platform

## What you get

Templates are distributed as shadcn registry blocks. Running the CLI writes real component files into your project, which means you edit them directly and never wait for an upstream release to change a paragraph.

The animation work is the reason to look. Section entrances are staggered with Motion, counters run on a viewport trigger, and the decorative SVG visuals animate their path lengths rather than fading a static image in. It is a deliberate style rather than a neutral base.

## How it fits a Next.js project

The templates are authored against Vite, so two edits are needed per file after install. Interactive sections need a use client directive at the top, and router links import from react-router-dom rather than next/link.

Both are mechanical changes an agent can make in one pass. Nothing else about the components is framework specific.

## Reach for it when

- you want a finished page, not a box of parts
- the product is technical and the audience reads monospace without flinching
- you would rather own the files than track a dependency

## Watch out for

- some registry blocks import demo components that are not published with them, so a card or two arrives empty and needs filling
- hero and template sections reference images on the project's own CDN, which you should replace with your own assets rather than hotlink
- the style is strongly opinionated, so a warm consumer brand will fight it

## Get started

Add a landing template:

```sh
pnpm dlx shadcn@latest add @watermelon/landing-01
```

---

aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements.
New entries are announced at https://t.me/arabic_Intelligence