Class names (cn)

cn is the small helper most components use. It is not required for the rest of the library, but re-exported from h2o-library/utils so apps share one import.

Import

import { cn } from "h2o-library/utils";
// or: import { cn } from 'h2o-library' when re-exported from the root

Code snippets

Basics

cn("px-3", "py-2", "rounded-md");
// => "px-3 py-2 rounded-md"

Conditionals and falsy (clsx)

const active = true;
cn("base", active && "bg-primary", !active && "opacity-50");
// => "base bg-primary"

Tailwind conflict resolution (tailwind-merge)

cn("p-2", "p-4");
// => "p-4"  — last utility wins, no duplicate padding keys

Objects and arrays (clsx)

cn(["flex", "gap-2"], { "items-center": true, "items-stretch": false });
// => "flex gap-2 items-center"

API

FunctionSignatureReturnsDescription
cn(...inputs: ClassValue[]) => stringstringMerges any clsx inputs (strings, objects, arrays, falsy values) and resolves Tailwind class conflicts so the later utility wins.