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
Pro Tip
moonui add --all to add all free components at onceInstalling Pro components?
@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 into your global CSS. This single import defines every CSS variable the components read — --primary, --border, --ring and the rest — for both light and dark mode.
/* MoonUI design tokens (light + dark) */ @import "@moontra/moonui"; @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.Prefer importing from your root layout instead? That works too:
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))
}