Classnames is a minimal JavaScript utility that helps you construct CSS class strings based on conditional logic. Instead of manually concatenating strings, developers can pass any combination of strings, arrays, or objects, and the library will output a clean, space-separated class list. When you provide an object, the keys represent class names and the boolean values determine whether each class should be included in the final string. This reduces boilerplate and the risk of typos or stray spaces, especially in React, Vue, or other component-based UIs where dynamic styling is common. The utility is small and framework-agnostic, so it can be used in Node, browser code, or any bundler setup including Browserify and Webpack. It maintains backwards compatibility while evolving (for example, introducing polyfill requirements for older browsers in newer versions), and it ships with TypeScript bindings for better type safety.
Features
- Simple API for joining class names from strings, arrays, and objects based on conditions
- Object syntax that maps class names to boolean flags for clear, declarative conditional styling
- Framework-agnostic design, usable in plain JavaScript, React, Vue, and other UI libraries
- Distributed via npm and works with Node, Browserify, Webpack, and other bundlers
- Lightweight implementation with guidance on polyfills for older browsers when needed
- Includes TypeScript typings and widespread ecosystem adoption, making it easy to integrate into existing projects