Watermelon UI Registry

A growing collection of 260+ beautifully crafted, copy-pasteable React UI components built with Tailwind CSS, Radix UI, and Framer Motion.

Website · Components · Installation · Contributing · Issues

---

Table of Contents

• About
• Components
• Installation
• Usage
• Local Development
• Contributing
• Community
• License

About

Watermelon UI is an open-source component registry that provides production-ready, copy-pasteable React components. Instead of installing a monolithic component library, you pick exactly the components you need — each one is self-contained with its own dependencies.

Key Features

• 260+ Components — Buttons, inputs, cards, accordions, modals, charts, dashboards, and much more
• Copy-Paste Architecture — Components are added directly to your project, giving you full ownership and control
• shadcn/ui Compatible — Works seamlessly with the shadcn CLI and registry protocol
• Modern Stack — Built with React 19, Tailwind CSS v4, Radix UI, and Framer Motion
• TypeScript First — Every component is fully typed out of the box
• Customizable — Components live in your codebase — modify them however you want

Components

Browse all components at ui.watermelon.sh.

Components are organized into categories:

Category	Examples
Inputs	Button, Input, Checkbox, Select, Switch, Slider, AI Input
Data Display	Card, Avatar, Badge, Alert, Accordion, Table
Feedback	Dialog, Alert Dialog, Toast (Sonner), Progress
Navigation	Breadcrumb, Tabs, Sidebar, Carousel
Layout	Separator, Collapsible, Split Panels
Charts	Area, Bar, Line, Pie, Radar (via Recharts)
Blocks	Full page sections, dashboards, login forms

Installation

Via shadcn CLI (Recommended)

Add any component to your project using the shadcn CLI:

npx shadcn@latest add "https://registry.watermelon.sh/<component-name>.json"

Examples:

# Add a button component
npx shadcn@latest add "https://registry.watermelon.sh/button.json"

# Add an animated accordion
npx shadcn@latest add "https://registry.watermelon.sh/animated-accordion.json"

# Add a chart component
npx shadcn@latest add "https://registry.watermelon.sh/chart.json"

Manual Installation

You can also copy component files directly from src/components/ui/ into your project's component directory.

Prerequisites

• React 18+ (React 19 recommended)
• Tailwind CSS v4
• A path alias @/ pointing to your src/ directory (standard in Next.js, Vite, etc.)

Usage

import { Button } from "@/components/ui/button";

export default function App() {
  return (
    <div className="p-8">
      <Button variant="default">Click me</Button>
    </div>
  );
}

Local Development

Prerequisites

• Bun (preferred) or Node.js 20+

Getting Started

# Clone the repository
git clone https://github.com/WatermelonCorp/watermellon-registry.git
cd watermellon-registry

# Install dependencies
bun install
# or
npm install

# Start the dev server
bun dev
# or
npm run dev

Available Scripts

Script	Description
bun dev	Start Vite development server
bun run build	Type-check and build for production
bun run lint	Run ESLint
bun run preview	Preview production build locally
bun run registry:build	Build the shadcn registry
bun run deploy	Deploy to Cloudflare Workers (Vercel)

Project Structure

watermellon-registry/
├── public/r/              # Built registry JSON files (one per component)
├── src/
│   ├── components/
│   │   ├── ui/            # 260+ UI component source files
│   │   ├── blocks/        # Full page block components
│   │   ├── dashboards/    # Dashboard components
│   │   └── pages/         # Full page components
│   ├── hooks/             # Custom React hooks
│   ├── lib/               # Utility functions (cn, etc.)
│   └── static-assets/     # Static assets
├── scripts/
│   ├── sync-registry.js   # Syncs components → registry.json
│   └── sync-dashboards.js # Syncs dashboard components
├── registry.json          # Master registry configuration
├── components.json        # shadcn configuration
└── wrangler.jsonc         # Cloudflare Workers config

Contributing

We love contributions! Whether it's fixing a bug, adding a new component, improving documentation, or suggesting features — every contribution helps make Watermelon UI better.

Please read our Contributing Guide to get started.

Quick Start for Contributors

1. Fork the repository
2. Create a feature branch: git checkout -b feat/my-component
3. Add your component in src/components/ui/
4. Run node scripts/sync-registry.js to update the registry
5. Commit and push: git push origin feat/my-component
6. Open a Pull Request

See CONTRIBUTING.md for the full guide.

Community

• GitHub Discussions — Ask questions and share ideas
• GitHub Issues — Report bugs or request features

Governance & Policies

• Code of Conduct — Our community standards
• Security Policy — How to report vulnerabilities
• AI Policy — Guidelines on AI-generated contributions
• License — MIT License

Acknowledgements

Watermelon UI is built on the shoulders of amazing open-source projects:

• shadcn/ui — Registry protocol and CLI
• Radix UI — Accessible component primitives
• Tailwind CSS — Utility-first CSS framework
• Framer Motion — Animation library
• Recharts — Chart library
• Vite — Build tool

License

This project is licensed under the MIT License.

---

Made with 🍉 by the Watermelon community