cn (Class Names)

The cn function is a simple wrapper around clsx for merging class names conditionally. It's the recommended way to combine class names in components.

Usage

import { cn } from '@/lib/utils';

// Basic usage
<div className={cn('base-class', 'another-class')} />

// Conditional classes
<div className={cn(
  'button',
  isActive && 'button--active',
  isDisabled && 'button--disabled'
)} />

// Object syntax
<div className={cn('card', {
  'card--elevated': elevation > 0,
  'card--bordered': hasBorder,
})} />

// Array syntax
<div className={cn([
  'flex',
  'items-center',
  isCentered && 'justify-center'
])} />

API

function cn(...inputs: ClassValue[]): string

Parameters

Parameter	Type	Description
...inputs	ClassValue[]	Class values (strings, objects, arrays, or falsy values)

ClassValue Types

• string - Class name string
• object - Object with class names as keys and booleans as values
• array - Array of ClassValue
• undefined | null | false - Ignored (useful for conditionals)

With SCSS Modules

import { cn } from '@/lib/utils';
import styles from './Component.module.scss';

function Component({ variant, className }) {
  return (
    <div className={cn(
      styles.component,
      styles[variant],
      className
    )} />
  );
}

Why Use cn?

• Cleaner conditional class logic
• Handles falsy values gracefully
• Supports multiple syntaxes
• Consistent pattern across codebase