Utils

cn() merges class names and resolves conflicting Tailwind utilities, so a className passed by a caller reliably overrides a component's defaults.

The UI components in this registry import cn from the standalone cn npm package (shadcn's compiled clsx + tailwind-merge), which the CLI installs for you. Use this item when you want the same helper as a local file for your own application code.

Installation

npx shadcn@latest add @uqudo/utils

Usage

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

<div className={cn("rounded-xl border p-4", className)} />

Conditional classes use the clsx syntax — falsy values are dropped:

cn("px-4", isActive && "bg-muted", isDisabled ? "opacity-50" : null)

Why not template strings

twMerge resolves conflicts by keeping the last utility of each group, which is what makes component overrides work:

cn("px-2 py-1", "px-4")
// → "py-1 px-4"     the later px-4 wins

`px-2 py-1 ${"px-4"}`
// → "px-2 py-1 px-4"   both survive; which one applies is up to CSS order

API Reference

cn

Returns a string: the class names, deduplicated by Tailwind utility group.

Implementation

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

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