cn()

The helper that builds class names and resolves conflicts.

Builds a className conditionally: clsx resolves the conditions, tailwind-merge resolves conflicting utilities.

import { cn } from "@squadbase/vantage/ui";
import type { ClassValue } from "@squadbase/vantage/ui";

<div className={cn("p-4", isActive && "bg-accent", className)} />;

Last one wins

Because it runs through tailwind-merge, conflicting utilities resolve in favour of the later one.

cn("p-2", "p-4"); // → "p-4"

That is what lets a className you pass to a component override its defaults. Every built-in component runs its classes through cn(), so className always behaves as an override.

// Reliably beats the default bg-primary
<Button className="bg-emerald-600 hover:bg-emerald-700">Run</Button>