Skip to main content

​
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 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 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 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 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

Build docs developers (and LLMs) love

Get started for freeTalk to us