clsx

clsx is a tiny (239 bytes gzipped) JavaScript utility for building className strings from a mix of strings, objects, arrays, and conditional expressions. It skips falsy values automatically, so developers can write clsx('btn', isActive && 'active', { disabled }) instead of chaining ternaries or template literals by hand.

Written by Luke Edwards as a faster, smaller drop-in replacement for the popular classnames package, clsx ships as ESM, CommonJS, and UMD builds with zero dependencies. A clsx/lite variant trims the API to string-only inputs for an even smaller footprint, and both versions are commonly paired with Tailwind CSS for conditional utility-class composition in React, Vue, Svelte, and other component frameworks.

What You Get

• A single default export function (clsx(...inputs)) that accepts strings, numbers, objects, arrays, and nested combinations of all four
• A clsx/lite entry point for string-only concatenation at an even smaller bundle size (140B gzipped)
• Prebuilt ESM (dist/clsx.mjs), CommonJS (dist/clsx.js), and UMD (dist/clsx.min.js) bundles with matching TypeScript declarations
• Zero runtime dependencies and broad compatibility down to Node 6 and IE9+ browsers

Common Use Cases

• Toggling CSS classes based on component state, e.g. clsx('btn', { active: isActive, disabled: isDisabled })
• Composing Tailwind CSS utility classes conditionally across React, Vue, and Svelte components
• Merging a base class list with a className prop passed down from a parent component
• Replacing verbose ternary or template-literal string concatenation for dynamic class names

Under The Hood

Architecture clsx is a single-file micro-library. src/index.js implements two functions: an internal recursive toVal(mix) that stringifies a single input (handling string/number, array via recursion, or object via a for...in over truthy keys), and the exported clsx(...arguments), which iterates variadic arguments, calls toVal on each truthy one, and joins the non-empty results with spaces. The lite variant (src/lite.js) drops object/array support entirely, keeping only a straight string-concatenation loop for a smaller build. The bin/index.js build script compiles both entry files into ESM, CommonJS, and minified UMD bundles under dist/, with a single ambient .d.ts/.d.mts pair shared across entry points via package.json’s exports conditions. There is no internal module graph beyond this — the runtime is well under 50 lines of code, and the package’s real “architecture” is its build/export surface (three module formats times two variants) rather than any internal layering.

Tech Stack Written in plain, ES5-compatible JavaScript with no runtime dependencies — package.json devDependencies are build/test-only (esm, terser for minification, uvu as the test runner). Types are hand-written ambient .d.ts/.d.mts files rather than generated from source, and builds are produced by a custom bin/index.js script rather than a bundler like Rollup or esbuild. The exports map targets both import and default (CJS) conditions per entry point (. and ./lite), and engines declares Node >=6 compatibility, reflecting a design goal of maximal compatibility over modern tooling.

Code Quality Tests live in test/index.js and test/lite.js using uvu + uvu/assert, covering strings, numbers, objects, arrays (including deep nesting), and edge cases like objects with push/pop keys or function arguments being ignored — a thorough suite for such a small surface area. test/classnames.js appears to benchmark parity against the classnames package it replaces. There is no TypeScript source (JS only, with a separate hand-maintained .d.ts), minimal inline comments, and terse variable naming (k, y, x, tmp) typical of size-optimized micro-libraries; readability is traded for byte count, but the logic is simple enough that this doesn’t hurt maintainability.

API Design The public API is a single variadic function accepting any mix of strings, numbers, objects, arrays, and falsy values, mirroring — and beating on file size — the popular classnames package it was designed to replace, meaning near-zero migration cost for existing users. Both a default and named clsx export are provided for import ergonomics, and the clsx/lite subpath export lets consumers opt into a smaller, string-only build without changing call sites elsewhere. The README is concise and example-driven, with runnable snippets ready to copy-paste. No configuration or setup step is required; the package is usable correctly from the first line of code.