cn

import { cn } from "@anantya/uix";

Overview

cn() joins class names into one string and resolves conflicting Tailwind classes, so the class passed last wins. Use it in a product component built from UIX components that takes a className prop, so the caller's classes win over the component's own.

Use className for layout only, such as margins, width and alignment. To change how a UIX component looks, use its props, such as variant and size, so it looks the same in every product. Missing a variant? Ask for it instead of styling your own.

Signature

function cn(...inputs: ClassValue[]): string;

type ClassValue =
  | string
  | number
  | bigint
  | boolean
  | null
  | undefined
  | ClassValue[]
  | Record<string, unknown>;

Parameters

Returns

One string of class names. Of two Tailwind classes that set the same thing, only the later one is kept, so cn("px-4 py-2", "px-6") returns "py-2 px-6". It knows every name the UIX theme has, such as bg-primary, px-gutter and ease-enter.

Example

import { Button, cn } from "@anantya/uix";

function SaveBar({ className }: { className?: string }) {
  return (
    <div className={cn("flex w-full justify-end gap-2", className)}>
      <Button variant="secondary">Cancel</Button>
      <Button>Save invoice</Button>
    </div>
  );
}

export default function SaveBars() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <SaveBar />
      <SaveBar className="justify-center" />
    </div>
  );
}

Notes

• Pass the caller's className last, so it wins a conflict
• Classes it doesn't know, such as from your own CSS, are kept as they are and never replace another class
• Use the UIX theme's sizes and shadows, such as text-sm and shadow-md, so your product matches the others. Missing one? Ask for it
• cn() runs on the server and in the browser