Install Watermelon UI with the CLI
Every Watermelon UI component, block, and dashboard installs with the shadcn CLI in one command: npx shadcn@latest add https://registry.watermelon.sh/r/<name>.json. The CLI copies the source into your project and installs its dependencies, so the code is yours to edit.
1. Set up shadcn in your project
If your React project does not use shadcn yet, run npx shadcn@latest init once. It sets up Tailwind CSS variables, the cn helper, and a components.json file that tells the CLI where to put files. See installation for Next.js and Vite.
2. Add a component
Copy the install command from any component page, or build it from the component name:
npx shadcn@latest add https://registry.watermelon.sh/r/card-split-accordian.json
The files land in your components folder, and any npm packages the component needs are installed for you.
Theme-token variants
Many animated components also ship a base variant that uses your theme tokens instead of fixed colors. Add -base to the name: https://registry.watermelon.sh/r/card-split-accordian-base.json.
What you can install
| Type | Example name | Browse |
|---|---|---|
| Components | accordion-1 | Components |
| Animated components | card-split-accordian | Animated components |
| Blocks | hero-3 | Blocks |
| Dashboards | agndex-dashboard | Dashboards |
Let your AI agent install for you
Connect the free Watermelon MCP server to Claude Code, Cursor, or Codex, and the agent can search the catalog and run these install commands itself.
Frequently asked questions
Do I need shadcn/ui to use Watermelon components?
You need the shadcn CLI and a components.json file, which npx shadcn@latest init creates. You do not need to install any shadcn components first.
What if a component file already exists?
The shadcn CLI asks before overwriting. Pass --overwrite to replace files without asking.