Add Utilities

Essential utility functions for RareUI components.

RareUI components rely on a few common utility functions. If you used the init command, these are likely already set up.

Install dependencies

We use clsx and tailwind-merge for conditional class merging.

npm install clsx tailwind-merge

Create utility file

Create a file at lib/utils.ts (or your preferred location) and add the following code:

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

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

Animation Dependencies

RareUI uses framer-motion (or motion) for animations.

Next.js 15 / React 19 Note

If you are using the latest React 19, you may need to override the peer dependency versions until framer-motion is fully updated, or switch to the new motion package.

{
  "overrides": {
    "framer-motion": {
      "react": "19.0.0-rc",
      "react-dom": "19.0.0-rc"
    }
  }
}
Previous
Next