Installation
Learn how to configure your project and install the necessary dependencies for MelonUI.
Option A: Global CLI (Recommended)
Best for running the short `melonui` command anywhere.
1. Install CLI globally
npm install -g @melonui-dev/cli
2. Initialize your workspace
melonui init
3. Open searchable component list
To see all available components and select which ones to add, run the add command without any arguments:
melonui add
Option B: Dynamic Execution (npx)
Best for running the CLI on-demand without installing a global utility.
1. Initialize your workspace
npx @melonui-dev/cli init
2. Open searchable component list
To fetch the remote registry and select components dynamically without global installs:
npx @melonui-dev/cli add
Option C: Manual Setup (No CLI)
If you prefer copy-pasting code manually instead of using our CLI.
Before using any MelonUI component manually, install the required packages in your project terminal:
npm install gsap @gsap/react three @react-three/fiber @react-three/drei clsx tailwind-merge framer-motion lenis
CSS Setup
Configure your global CSS variables to support MelonUI's custom color mapping (coral-red and neon-green accents). Add the following variables to your global CSS stylesheet:
:root {
--color-[#ff5c71]: #ff5c71; /* Coral Red */
--color-[#7fff5e]: #7fff5e; /* Neon Green */
--color-[#e0f2dc]: #e0f2dc; /* Pale White */
--font-londrina-solid: 'Londrina Solid', sans-serif;
}TypeScript
MelonUI components are fully typed out. Ensure your project's tsconfig options support path mappings and module resolution:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}