Installation
Get started with MoonUI in your React or Next.js project. Choose between our CLI tool for automatic setup or manual installation.
Prerequisites
Make sure you have these installed before proceeding
React 18+
or Next.js 13+
Tailwind CSS v3
For styling system
Node.js 16+
LTS recommended
node -v and npm -v in your terminal to verify versions.Install MoonUI CLI globally
$ npm install -g @moontra/moonui-cliInitialize MoonUI in your project
$ moonui initThis will create a moonui.config.js file and set up your project with Tailwind CSS.
Add components to your project
$ moonui add button card dialogYou're ready!
Start using MoonUI components in your project
moonui add --all to add all free components at once@moontra/moonui-pro and unlock with a license key. Set MOONUI_LICENSE_KEY at build time and wrap your config with withMoonUIProToken. The Authentication & Pro setup guide covers Vercel, Docker, Kubernetes, Dokploy and self-hosted deployments — the same steps everywhere.Post Installation
Configure your project after installation
1. Configure Tailwind CSS
Add the MoonUI preset to your tailwind.config.js. The preset maps Tailwind's color, radius, and font scales onto MoonUI's CSS variables — without it, utilities like bg-primary are never generated and components render with no colors.
module.exports = {
presets: [require("@moontra/moonui/tailwind-preset")],
content: [
"./src/**/*.{ts,tsx}",
"./node_modules/@moontra/moonui/dist/**/*.{js,mjs}"
],
plugins: [require("tailwindcss-animate")]
}Everything the preset sets is still yours to override — add your own theme.extend block and it wins.
2. Add Global Styles
Import MoonUI's design tokens from your root layout (or entry file). This single import defines every CSS variable the components read — --primary, --border, --ring and the rest — for both light and dark mode.
@tailwind base; @tailwind components; @tailwind utilities;
hsl(var(--primary)). Without this import they render with no colors. To override a token, redeclare it in your own :root block after the import.Add this line to your root layout (Next.js) or main.jsx (Vite). It is the only form measured to work on Next.js, Next.js with postcss-import and Vite. Prefer CSS? The @import specifier depends on your setup — see the table in the package README.
import "@moontra/moonui/tokens.css";
3. Setup Utils
Create a lib/utils.ts file:
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}