Use classNames for Conditional Classes

Use the classnames (classNames) utility for conditional or composed classNames instead of template literals

Source: .agents/rules/use-classnames-for-conditional-classes.mdc

Metadata

• alwaysApply: true

Content

Use classNames for Conditional Classes

When building className from conditional or multiple parts, use the classnames utility (imported as classNames), not template literals with ${}.

Convention

import classNames from 'classnames';

// ✅ Preferred: classNames()
<button
  className={classNames(
    'base-class another-base',
    isActive ? 'active-class' : 'inactive-class',
    error && 'error-class'
  )}
/>

// ❌ Avoid: template literal
<button
  className={`base-class ${isActive ? 'active-class' : 'inactive-class'}`}
/>

Rules

1. Use classNames(...) for any className that depends on props, state, or multiple conditions.
2. Pass base classes as strings and conditional classes as expressions (ternaries, condition && 'class', or objects).
3. Keep a single import: import classNames from 'classnames';