Add Utilities

Commonly used utilities for Vengeance UI

Install dependencies

1npm install clsx tailwind-merge framer-motion

Add util file

lib/utils.ts

1import { type ClassValue, clsx } from "clsx";2import { twMerge } from "tailwind-merge";3 4export function cn(...inputs: ClassValue[]) {5  return twMerge(clsx(inputs));6}

Use the utility

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

components/example.tsx

1import { cn } from "@/lib/utils";2 3export function Example({ active }: { active: boolean }) {4  return (5    <div6      className={cn(7        "rounded-md border px-4 py-2 text-sm",8        active && "border-neutral-950 bg-neutral-950 text-white"9      )}10    >11      Vengeance UI12    </div>13  );14}

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.