cn-lite

A tiny utility to conditionally combine CSS class names.
Lightweight, TypeScript-ready, and perfect for React, Vue, or vanilla JavaScript.

✨ Features

• Zero dependencies
• Works with strings, arrays, and objects
• Recursively flattens nested class lists
• Perfect for Tailwind CSS and React
• ESM + TypeScript support

🚀 Installation

npm install cn-lite

or

yarn add cn-lite

📦 Usage

import cn from "cn-lite";

const buttonClass = cn(
  "btn",
  isPrimary && "btn-primary",
  isDisabled ? "btn-disabled" : "btn-active",
  extraClassName
);

console.log(buttonClass);
// "btn btn-primary btn-active custom-class"

✅ Works with:

• Strings
• Conditional booleans
• Arrays
• Nested arrays
• Falsy values are automatically skipped

📚 More Examples

const classes = cn(
  "text-lg",
  false && "hidden",
  ["hover:underline", null, ["bg-blue-500"]],
  isActive && "font-bold"
);

console.log(classes);
// "text-lg hover:underline bg-blue-500 font-bold"

import cn from "cn-lite";

const isActive = true;
const isDisabled = false;

const className = cn(
  "btn", // string
  isActive && "btn-active", // conditional string
  ["rounded", "text-white"], // array of class names
  {
    "btn-disabled": isDisabled, // object with condition
    "btn-primary": true, // always included from object
  }
);

console.log(className);
// Output: "btn btn-active rounded text-white btn-primary"

🔹 Why cn-lite?

• Zero dependencies
• Tree-shakeable — only what you use gets included
• TypeScript support out of the box
• Smaller footprint compared to popular classnames

🆚 Why Not Just Use classnames?

• classnames is great, but this is:
• Simpler — less than 30 lines of code
• Fully transparent — you can read & understand it instantly
• No extra features you don't need
• Tiny footprint for small/medium projects

📄 License

MIT © Aravind Prabash