Installation

Installation

ForgeUI is designed to work with Next.js 15+, React 19+, and Tailwind CSS v4.

Prerequisites

Before installing ForgeUI, make sure you have:

• Node.js 18.17 or later
• npm, yarn, or pnpm package manager
• A Next.js 15 project (App Router recommended)
• Tailwind CSS v4 configured

Option 1: CLI (Recommended)

The ForgeUI CLI is the fastest way to add components to your project:

# Initialize ForgeUI in your project
npx forgeui init

# This will:
# 1. Create a forgeui.config.ts file
# 2. Set up the design tokens in globals.css
# 3. Install required dependencies
# 4. Configure path aliases

Option 2: Manual Setup

If you prefer manual control, follow these steps:

#### Step 1: Install Dependencies

npm install framer-motion lucide-react next-themes clsx tailwind-merge

#### Step 2: Configure Path Aliases

Add to your tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

#### Step 3: Add Design Tokens

Copy the ForgeUI design tokens into your globals.css. You can find the full token set on the Themes page or export them from the Theme Engine.

#### Step 4: Create Utility Helper

Create src/lib/utils.ts:

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

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

#### Step 5: Add Components

Now you can add individual components:

npx forgeui add button
npx forgeui add input
npx forgeui add modal

Or copy component source code directly from the Component Library.

Verify Installation

Run your development server to verify everything works:

npm run dev

Visit http://localhost:3000 and you should see ForgeUI components rendering correctly.