# Class names

Joins class names and resolves Tailwind conflicts, last one wins, knowing the theme's own tokens.

```tsx
import * as React from "react"
import { Label } from "@zenoxai/ui/components/label"
import { Switch } from "@zenoxai/ui/components/switch"
import { cn } from "@zenoxai/ui/lib/utils"

function ClassNamesDemo() {
  const [selected, setSelected] = React.useState(true)
  const className = cn(
    "rounded-md border border-border px-2 py-1 text-sm",
    selected && "border-primary bg-primary-soft text-primary-soft-foreground",
    "px-3"
  )

  return (
    <div className="flex flex-col items-start gap-3">
      <div className="flex items-center gap-2">
        <Switch
          id="class-names-selected"
          checked={selected}
          onCheckedChange={setSelected}
        />
        <Label htmlFor="class-names-selected">Selected</Label>
      </div>
      <span className={className}>Critical</span>
      <code className="font-mono text-sm wrap-anywhere text-text-secondary">
        {className}
      </code>
    </div>
  )
}
```

## Usage

```tsx
import { cn } from "@zenoxai/ui/lib/utils"

<span className={cn("px-2 text-sm", selected && "bg-primary-soft", className)} />
```

Use `cn` for every `className` built from more than one source: a component's own classes, a
condition and the caller's `className`. The last class wins a conflict, so the caller can
override a padding or a color.

A bare `twMerge` does not know the tokens this theme adds, such as `text-md` and
`text-dense-xs`, and drops one of two classes it cannot tell apart. `cn` registers them.

It is a plain function, with no React and no DOM: it runs in a Server Component too.

## API reference

`import { ... } from "@zenoxai/ui/lib/utils"`

### cn

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

cn joins class names and resolves Tailwind conflicts, last one wins:
`cn("px-2", condition && "px-4", className)`. Use it for every className
that is built from more than one source.

| Parameter | Type | Description |
| --- | --- | --- |
| ...inputs (optional) | `ClassValue[]` | Class names, and falsy values that are skipped, as in clsx. |

Returns `string`: One class string, with the conflicts resolved.