Need help with classnames?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

14.6K Stars 509 Forks MIT License 310 Commits 11 Opened issues


A simple javascript utility for conditionally joining classNames together

Services available


Need anything else?

Contributors list


NPM version Node.js CI NPM Weekly Downloads License Supported by Thinkmill

A simple JavaScript utility for conditionally joining classNames together.

Install with npm, Bower, or Yarn:

# via npm
npm install classnames

via Bower

bower install classnames

or Yarn (note that it will automatically save the package to your dependencies in package.json)

yarn add classnames

Use with Node.js, Browserify, or webpack:

var classNames = require('classnames');
classNames('foo', 'bar'); // => 'foo bar'

Alternatively, you can simply include

on your page with a standalone
 tag and it will export a global 
method, or define the module if you are using RequireJS.

Project philosophy

We take the stability and performance of this package seriously, because it is run millions of times a day in browsers all around the world. Updates are thoroughly reviewed for performance impacts before being released, and we have a comprehensive test suite.

Classnames follows the SemVer standard for versioning.

There is also a Changelog.



function takes any number of arguments which can be a string or object. The argument
is short for
{ foo: true }
. If the value associated with a given key is falsy, that key won't be included in the output.
classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

Arrays will be recursively flattened as per the rules above:

var arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'

Dynamic class names with ES2015

If you're in an environment that supports computed keys (available in ES2015 and Babel) you can use dynamic class names:

let buttonType = 'primary';
classNames({ [`btn-${buttonType}`]: true });

Usage with React.js

This package is the official replacement for

, which was originally shipped in the React.js Addons bundle.

One of its primary use cases is to make dynamic and conditional

props simpler to work with (especially more so than conditional string manipulation). So where you may have the following code to generate a
prop for a
 in React:
class Button extends React.Component {
  // ...
  render () {
    var btnClass = 'btn';
    if (this.state.isPressed) btnClass += ' btn-pressed';
    else if (this.state.isHovered) btnClass += ' btn-over';
    return {this.props.label};

You can express the conditional classes more simply as an object:

var classNames = require('classnames');

class Button extends React.Component { // ... render () { var btnClass = classNames({ btn: true, 'btn-pressed': this.state.isPressed, 'btn-over': !this.state.isPressed && this.state.isHovered }); return {this.props.label}; } }

Because you can mix together object, array and string arguments, supporting optional

props is also simpler as only truthy arguments get included in the result:
var btnClass = classNames('btn', this.props.className, {
  'btn-pressed': this.state.isPressed,
  'btn-over': !this.state.isPressed && this.state.isHovered


There is an alternate version of

available which correctly dedupes classes and ensures that falsy classes specified in later arguments are excluded from the result set.

This version is slower (about 5x) so it is offered as an opt-in.

To use the dedupe version with Node.js, Browserify, or webpack:

var classNames = require('classnames/dedupe');

classNames('foo', 'foo', 'bar'); // => 'foo bar' classNames('foo', { foo: false, bar: true }); // => 'bar'

For standalone (global / AMD) use, include

in a
 tag on your page.

version (for css-modules)

If you are using css-modules, or a similar approach to abstract class "names" and the real

values that are actually output to the DOM, you may want to use the

Note that in ES2015 environments, it may be better to use the "dynamic class names" approach documented above.

var classNames = require('classnames/bind');

var styles = { foo: 'abc', bar: 'def', baz: 'xyz' };

var cx = classNames.bind(styles);

var className = cx('foo', ['bar'], { baz: true }); // => "abc def xyz"

Real-world example:

/* components/submit-button.js */
import { Component } from 'react';
import classNames from 'classnames/bind';
import styles from './submit-button.css';

let cx = classNames.bind(styles);

export default class SubmitButton extends Component { render () { let text = ? 'Processing...' : 'Submit'; let className = cx({ base: true, inProgress:, error:, disabled: this.props.form.valid, }); return {text}; } };

Polyfills needed to support older browsers

classNames >=2.0.0

: see MDN for details about unsupported older browsers (e.g. <= IE8) and a simple polyfill.


Copyright (c) 2018 Jed Watson. Copyright of the Typescript bindings are respective of each contributor listed in the definition file.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.