Add Utilities

Commonly used utilities for Vengeance UI

Install dependencies

code

npm install clsx tailwind-merge framer-motion

Add util file

lib/utils.ts

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

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

Use the utility

Use cn anywhere you need conditional classes that should still merge Tailwind conflicts cleanly.

components/example.tsx

import { cn } from "@/lib/utils";

export function Example({ active }: { active: boolean }) {
  return (
    <div
      className={cn(
        "rounded-md border px-4 py-2 text-sm",
        active && "border-neutral-950 bg-neutral-950 text-white"
      )}
    >
      Vengeance UI
    </div>
  );
}

Motion components

Many animated components use framer-motion. Components that need a different dependency list still show the exact package command on their own component page.