whatisgithub

What is classnames?

jedwatson/classnames — explained in plain English

Analysis updated 2026-06-24

17,800JavaScriptAudience · developerComplexity · 1/5Setup · easy

In one sentence

A tiny JavaScript utility that builds CSS class name strings from conditions, pass strings, arrays, and objects and it returns only the class names whose conditions are true, eliminating messy string concatenation.

Mindmap

mindmap
  root((classnames))
    What it does
      Conditional class assembly
      Cleans up string logic
      No if-chains needed
    Tech stack
      JavaScript
      Node.js
      Browser
    Use cases
      React components
      Dynamic class strings
      CSS Modules
    Features
      String and array inputs
      Object truthy filtering
      Dedup variant
    Audience
      Frontend developers
      React developers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Conditionally apply CSS classes in a React component based on state without writing messy ternary chains.

USE CASE 2

Merge className props passed in from a parent with a component's own internal conditional classes.

USE CASE 3

Build dynamic class strings for UI elements like buttons that have multiple visual states such as active or disabled.

What is it built with?

JavaScript

How does it compare?

jedwatson/classnamespinojs/pinoafarkas/lazysizes
Stars17,80017,80317,732
LanguageJavaScriptJavaScriptJavaScript
Setup difficultyeasyeasyeasy
Complexity1/52/52/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min
License terms not described in the explanation.

So what is it?

classnames is a tiny JavaScript utility that helps you build CSS class name strings from multiple conditions. In web development, HTML elements get their visual styles applied through class names, strings like "btn btn-pressed btn-large", and when your code needs to decide which classes apply based on application state, assembling that string gets messy fast. The problem is straightforward: you might have a button that needs the class "btn" always, plus "btn-pressed" only when the user is clicking, plus "btn-over" only when the cursor is hovering, and you want to avoid writing long chains of if-statements to manually concatenate these strings. classnames accepts any mix of strings, arrays, and objects, and combines them into a single class string. When you pass an object, keys whose values are truthy (meaning true or a non-empty value) get included, falsy values get excluded. For example, passing the object {btn: true, 'btn-pressed': isPressed} produces "btn btn-pressed" only when isPressed is true. Null, false, and undefined arguments are silently ignored, so you can safely pass optional values without extra checks. The library is most commonly used with component-based JavaScript UI frameworks where components receive class names from parent components and need to merge them with their own internal conditional classes. It installs from npm with a single command and works in both Node.js server environments and directly in browsers. There are also variant builds for deduplicating repeated class names and for working with CSS Modules (a system where class names are locally scoped). The full README is longer than what was provided.

Copy-paste prompts

Prompt 1
Show me how to use classnames in a React button component to conditionally apply active, disabled, and size variant classes based on props.
Prompt 2
Write a React component using classnames that correctly merges a className prop from the parent with its own internal conditional classes.
Prompt 3
How do I use the classnames/dedupe build variant to ensure no duplicate class names appear in the final class string?
Prompt 4
Show me how to use classnames with CSS Modules so locally scoped class names and conditional logic work cleanly together.
Prompt 5
Rewrite this ternary-chain class string using classnames: className={isActive ? 'btn btn-active large' : 'btn large'}.

Frequently asked questions

What is classnames?

A tiny JavaScript utility that builds CSS class name strings from conditions, pass strings, arrays, and objects and it returns only the class names whose conditions are true, eliminating messy string concatenation.

What language is classnames written in?

Mainly JavaScript. The stack also includes JavaScript.

What license does classnames use?

License terms not described in the explanation.

How hard is classnames to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is classnames for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.