clsx

Tiny utility for constructing className strings conditionally — the lightweight, fast alternative to classnames.

clsx

General JS

Tiny utility for constructing className strings conditionally — the lightweight, fast alternative to classnames.

npm GitHub Docs

Fit

Bundle (gzip)

353 B

563 B raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Building dynamic className strings in JSX requires string concatenation, ternaries, and array joins — all of which get verbose and hard to read when multiple conditional classes are involved.

What It Does

clsx accepts strings, objects, and arrays in any combination and returns a joined className string, skipping falsy values. It's 228 bytes and processes the same patterns as the classnames package but ~3x faster.

Installation

bash

npm install clsx

Usage Example

tsx

import clsx from 'clsx';

function Button({ variant, disabled, className, children }) {
  return (
    <button
      className={clsx(
        'btn',
        { 'btn-primary': variant === 'primary', 'btn-secondary': variant === 'secondary' },
        disabled && 'btn-disabled',
        className
      )}
      disabled={disabled}
    >
      {children}
    </button>
  );
}

// clsx('foo', { bar: true, baz: false }, 'qux') → 'foo bar qux'

Related packages

ai (Vercel AI SDK)General JS

Unified TypeScript SDK for building AI-powered apps — switch between 20+ LLM providers without rewriting code.

animejsGeneral JS

Lightweight JavaScript animation library with a tiny footprint and a powerful, expressive API.

AOSGeneral JS

An easy-to-use library that makes elements fade, slide, or zoom into view as the user scrolls down your page.

archiverGeneral JS

Streaming interface for generating ZIP and TAR archives in Node.js — create compressed archives programmatically from files, directories, and buffers.

@formkit/auto-animateGeneral JS

> Add smooth transitions to any element with a single line — zero-config animations for adds, removes, and moves.