Watermelon Platform

The open-source platform behind ui.watermelon.sh.

Free for the community. Supported by people and teams who want Watermelon to keep getting better.

This repo powers the browsing experience for Watermelon components, animated UI, blocks, dashboards, and templates. It is where discovery, previews, docs, SEO pages, and contributor-facing content all come together.

What This Repo Does

renders the public Watermelon UI experience
loads content from MDX and colocated source files
previews components, blocks, dashboards, and templates
ships showcase compositions built from existing blocks
generates the sitemap and other search-friendly surfaces
gives contributors a structured way to publish new content
includes developer-facing AI and MCP discovery files

Stack

React 19
TypeScript
Vite
Tailwind CSS 4
Motion
React Router
Bun for the preferred local workflow

Quick Start

git clone https://github.com/WatermelonCorp/watermelon-platform.git
cd watermelon-platform
bun install
bun run dev

Useful commands:

bun run dev: start the local app
bun run build: generate the sitemap, typecheck, and build production assets
bun run lint: run ESLint
bun run preview: preview the production build locally
bun run deploy: build and deploy
bun run mcp: start the local Watermelon MCP server over stdio
bun run mcp:dev: run the hosted MCP Worker locally
bun run mcp:deploy: deploy the hosted MCP Worker to Cloudflare
bun run generate:shadcn-registry: generate installable shadcn registry JSON

Public machine-readable endpoints:

/llms.txt
/openapi.json
/api/docs
/api/catalog/summary
/api/catalog/entries?kind=blocks

Content Model

Most public content is file-based and lives in src/data/contents.

animated-components/: animated component source folders
registry/: MDX metadata for animated component entries
components/: UI component category configs
blocks/: block content and previews
showcases/: curated compositions built from existing blocks
dashboards/: dashboard entries and demos
templates/: template entries and demos

Routes are wired in src/components/layout/app-routes.tsx, and the sitemap is generated from the same content model in scripts/generate-sitemap.ts.

Installable Components

Watermelon components are distributed as copy-paste shadcn registry items, so the resulting code lives in the consuming project and remains fully editable.

npx shadcn@latest add https://registry.watermelon.sh/r/card-split-accordian.json

The registry is generated from the maintained animated component source during every platform build and includes the complete base-component collection. A release-ready CLI lives in packages/cli; its public npm package name is @watermelon-ui/cli. Publishing requires an npm organization and the NPM_TOKEN GitHub repository secret, then runs through the manual Publish Watermelon UI CLI workflow.

The same CLI can configure the hosted MCP server for supported clients:

npx @watermelon-ui/cli init --client codex
npx @watermelon-ui/cli init --client claude
npx @watermelon-ui/cli init --client cursor

Contributing

The easiest way to contribute is to improve one thing at a time:

Read CONTRIBUTING.md.
Pick the content type you want to add or improve.
Follow the matching folder pattern in src/data/contents.
Run bun run lint and bun run build.
Open a PR with screenshots for anything visual.

Docs, polish, accessibility fixes, demo improvements, and contributor experience changes are all valuable contributions here.

AI And Developer Surfaces

Watermelon includes a few machine-readable surfaces to help agents and tooling understand the project faster:

public/llms.txt
public/openapi.json
public/sitemap.xml
mcp/server.ts
mcp/worker.ts
wrangler.mcp.toml
worker/site.ts
skills/watermelon-ui/SKILL.md
.codex-plugin/plugin.json
.claude-plugin/plugin.json
.cursor-plugin/plugin.json

The hosted MCP endpoint lives at https://mcp.watermelon.sh/mcp and exposes 850 source-backed examples through search, retrieval, inspiration, category, and page-composition tools.

The hosted Worker records aggregate initialize and tools/call event counts in Cloudflare Analytics Engine. It does not retain IP addresses, session IDs, prompts, tool arguments, or client-provided versions.

Repository Health

Star History

The chart is generated from the repository's own stargazer timeline. Maintainers can refresh it with bun run generate:star-history.

Support The Work

This platform is part of the free public Watermelon ecosystem. If it saves your team time, sponsorship helps us keep improving it for everyone.

use the GitHub Sponsor button when available
use the custom funding link configured for the org: watermelon.sh
star the repo and share it with other builders

Where Sponsor Support Goes

Support for this repo helps fund:

more free public components, dashboards, templates, and docs
better previews, discovery, search, and SEO improvements
bug fixes, accessibility work, and contributor experience cleanup
hosting, deployment, and ongoing maintenance

As of August 30, 2026, GitHub Sponsors for the WatermelonCorp org is not fully activated yet, so the funding links are the current support path.