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

Quick tip: Run node -v and npm -v in your terminal to verify versions.

Install MoonUI CLI globally

terminal

$ npm install -g @moontra/moonui-cli

Initialize MoonUI in your project

terminal

$ moonui init

This will create a moonui.config.js file and set up your project with Tailwind CSS.

Add components to your project

terminal

$ moonui add button card dialog

You're ready!

Start using MoonUI components in your project

Pro Tip

Use moonui add --all to add all free components at once

Post Installation

Configure your project after installation

1. Configure Tailwind CSS

Update your tailwind.config.js file:

tailwind.config.js

module.exports = {
  darkMode: ["class"],
  content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/@moontra/moonui/**/*.js"
  ],
  theme: {
    extend: {
      // Your custom theme
    }
  },
  plugins: [require("tailwindcss-animate")]
}

2. Add Global Styles

Add MoonUI styles to your global CSS file:

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    /* Add more CSS variables */
  }
  
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
  }
}

3. Setup Utils

Create a lib/utils.ts file:

lib/utils.ts

import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Browse Components

Explore our collection of 200+ components

Customize Theme

Learn how to customize MoonUI to match your brand