Installation

Install and configure ForgeUI in your React or Next.js project.

Prerequisites

Before installing ForgeUI, make sure you have:

• Node.js 18.0 or later
• A React 19.0+ or Next.js 15+ project
• Basic familiarity with React and Tailwind CSS

Installation steps

1. Install core dependencies

   ForgeUI requires React, Framer Motion, and Tailwind CSS. Install them in your project:

   npm

   npm install react@^19.0.0 react-dom@^19.0.0 framer-motion@^11.15.0
   

   ForgeUI uses the motion package from Framer Motion. Make sure you’re using Framer Motion v11.15.0 or later.

2. Install Tailwind CSS

   If you haven’t already, install and configure Tailwind CSS:

   npm

   npm install tailwindcss@^4.2.1 tailwindcss-animate@^1.0.7
   

   Follow the Tailwind CSS installation guide to complete the setup.

3. Install utility dependencies

   ForgeUI components use utility libraries for class name management:

   npm

   npm install clsx@^2.1.1 tailwind-merge@^2.5.5 class-variance-authority@^0.7.1
   
4. Create utility function

   Create a lib/utils.ts file in your project with the following content:

   lib/utils.ts

   import { clsx, type ClassValue } from "clsx"
   import { twMerge } from "tailwind-merge"
   
   export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs))
   }
   

   This utility function combines class names and resolves Tailwind CSS conflicts.

5. Configure Tailwind CSS

   Add tailwindcss-animate to your Tailwind configuration:

   tailwind.config.js

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       './pages/**/*.{js,ts,jsx,tsx,mdx}',
       './components/**/*.{js,ts,jsx,tsx,mdx}',
       './app/**/*.{js,ts,jsx,tsx,mdx}',
     ],
     theme: {
       extend: {},
     },
     plugins: [require('tailwindcss-animate')],
   }
   
6. Install icon libraries (optional)

   Many ForgeUI components use icons. Install the icon libraries used in the components:

   npm

   npm install lucide-react@^0.469.0 react-icons@^5.4.0 @tabler/icons-react@^3.28.1
   

   You can choose to install only the icon libraries you need based on which components you plan to use.

7. Set up TypeScript (recommended)

   ForgeUI components are written in TypeScript. If you’re using TypeScript, ensure your tsconfig.json includes:

   tsconfig.json

   {
     "compilerOptions": {
       "target": "ES2020",
       "lib": ["ES2020", "DOM", "DOM.Iterable"],
       "jsx": "preserve",
       "module": "ESNext",
       "moduleResolution": "bundler",
       "paths": {
         "@/*": ["./*"]
       },
       "strict": true
     }
   }
   

   The @/* path alias is commonly used in ForgeUI components to import utilities.

Verify installation

To verify your installation is complete, try importing the dependencies in a test file:

import { motion } from "framer-motion"
import { cn } from "@/lib/utils"

console.log("ForgeUI dependencies installed successfully!")

If you don’t see any errors, you’re ready to start using ForgeUI components.

Next steps

Quick start

Build your first animated component

Browse components

Explore all available components

Troubleshooting

If you encounter module resolution errors, make sure the @/* path alias in your tsconfig.json points to the correct directory (usually the project root).

Common issues

• Motion import errors: Ensure you’re using motion/react for imports in newer Framer Motion versions
• Tailwind classes not applying: Verify your Tailwind configuration includes all content paths
• Type errors: Make sure you have @types/react and @types/react-dom installed