cn

Installation

Usage

import { cn } from "@/ui";

<div className={cn("p-4 rounded-lg", isActive && "bg-primary text-primary-foreground", className)} />

cn is twMerge re-exported: later classes win over earlier conflicting ones, and conditional values (false, null, undefined) are ignored.

Notes

• Every Litefy component imports cn from @/ui, so the utils directory must sit next to the components directory. Installing any component via CLI automatically pulls in cn.
• Requires the tailwind-merge npm package (npm add tailwind-merge).

API Reference

cn

function cn(...inputs: ClassNameValue[]): string;
type ClassNameValue = ClassValue | ClassValue[];

Merges class values with tailwind-merge and returns a single class string.