React + Nakshora 3.0

Conditional classes, dark-mode hooks, component extraction patterns.

Conditional classes#

import { useState } from 'react';

export function ThemeToggle() {
  const [dark, setDark] = useState(false);
  return (
    <button
      onClick={() => setDark(!dark)}
      className={
        dark
          ? 'px-4 py-2 bg-slate-800 text-white rounded-lg'
          : 'px-4 py-2 bg-slate-100 text-slate-900 rounded-lg'
      }
    >
      Toggle theme
    </button>
  );
}

Patterns that scale#

• Extract repeated class strings into <Button variant="primary"> components
• Keep conditional logic in arrays/ternaries of FULL class names
• Co-locate dark: variants with the component that owns them

Gotchas#

• String-built classes like bg-${color}-500 are invisible to the scanner — map from a literal object instead