Build React Native interfaces with a registry-first workflow.

What is Watermelon?

Watermelon is a React Native component registry and CLI. Instead of shipping one giant UI dependency, it lets you pull installable primitives like button and text directly into your project.

The result is a docs-and-registry workflow that feels familiar if you have used shadcn on the web, but tuned for native app structure, NativeWind styling, and Expo-friendly local development.

Why it exists

Own the code

Installed components live in your codebase, so refactors, animations, and design tweaks stay under your control.

Install incrementally

Start with a couple of primitives, then layer in more only when the product actually needs them.

Keep docs close

Every component has install commands, examples, previews, and API notes in the same documentation flow.

Stay native-first

The primitives are designed for React Native and Expo rather than being thin ports of web-only assumptions.

Typical workflow

Pick components

Browse the registry, open the docs for a primitive, and verify that its API and visual behavior match the surface you are building.

Install with CLI

Initialize your project once, then add primitives whenever you need them.

CLI workflow

watermelon init
watermelon add button text

Customize output

After installation, the files are yours. Adjust variants, spacing, tokens, or composition patterns to fit your product instead of waiting on a package release.

Project shape

A typical setup keeps UI primitives in a local component directory, uses a shared utility helper, and points Tailwind or NativeWind to the right sources.

Example structure

app/
components/
ui/
  button.tsx
  text.tsx
lib/
utils.ts
global.css
watermelon.json

Next steps

Start with the installation guide if you are setting up a fresh app, or jump into the components catalog if you already want to pull in a primitive and begin customizing it.