Skip to main content
RareUI components share a small set of common dependencies. If you used npx rareui@latest init followed by npx rareui@latest add, these are installed automatically. If you are setting up manually, follow the steps below.

​
Install dependencies

1

Install class merging utilities

clsx and tailwind-merge are used by every RareUI component for conditional and conflict-free class name composition.
npm install clsx tailwind-merge
2

Install Framer Motion

Framer Motion powers all RareUI animations. Install the motion package (the modern name for framer-motion v12+).
npm install framer-motion
If you are using React 19 and see peer dependency warnings, add an overrides block to your package.json (see below). This is a temporary workaround until the upstream package resolves React 19 support.
package.json
{
  "overrides": {
    "framer-motion": {
      "react": "^19.0.0",
      "react-dom": "^19.0.0"
    }
  }
}
3

Install icon library

Some RareUI components use lucide-react for icons.
npm install lucide-react
4

Create the utility file

Create lib/utils.ts with the cn() function. This is imported by every RareUI component.
lib/utils.ts
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
cn() accepts any number of class values, filters falsy values with clsx, and resolves Tailwind class conflicts with tailwind-merge. For example:
cn("px-4 py-2", isLarge && "px-8", "bg-blue-500 bg-red-500")
// → "py-2 px-8 bg-red-500"  (conflicts resolved, falsy values removed)

​
Path alias configuration

RareUI components import from @/lib/utils using the @/* alias. Verify your tsconfig.json has this configured:
tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}
If you created your project with create-next-app, this alias is already present. The next.config.ts file also picks it up automatically.

​
Full dependency summary

PackagePurposeRequired
framer-motionComponent animationsYes
clsxConditional class namesYes
tailwind-mergeTailwind class conflict resolutionYes
lucide-reactIcons used in some componentsSome components
If you use the CLI (npx rareui@latest add), required dependencies for each component are installed automatically. You only need to install them manually when copying component code by hand.

​
Next steps

Build docs developers (and LLMs) love

Get started for freeTalk to us