---
title: "cn utility"
description: "Join class names without merging conflicting UnoCSS utilities. Source exports cn; npm 1.5.0 currently ships cnBase instead."
canonical_url: "https://vinicunca.dev/unocss-variants/concepts/cn"
---
# cn utility

> Join class names without merging conflicting UnoCSS utilities. Source exports cn; npm 1.5.0 currently ships cnBase instead.

`cn` is a clsx-style concatenator. It does **not** resolve conflicting utilities. Arrays nest, objects contribute keys whose values are truthy, and falsy values are skipped.

## Intended import (source)

At git tag `v1.5.0`, `src/index.ts` exports:

```ts
import { cn, uv } from 'unocss-variants';

cn('px-2 py-1', 'px-4');
// 'px-2 py-1 px-4'

cn('color-blue-500', 'color-red-500');
// 'color-blue-500 color-red-500'

cn('text-sm', { 'font-bold': true, 'hidden': false });
// 'text-sm font-bold'

cn('a', null, undefined, false, 'b');
// 'a b'
```

Use `cn` when you need to join extra classes outside a recipe. Inside `uv`, joining is already handled.

## npm 1.5.0 JavaScript bundle

The published `unocss-variants@1.5.0` tarball ships a **stale dist/**:

| Name | Types (`dist/index.d.ts`) | Runtime (`dist/index.mjs`) |
| --- | --- | --- |
| `uv` | yes | yes |
| `cn` | declared | **not exported** |
| `cnBase` | declared | yes (the concatenator) |
| `createUv` | declared | yes (no-config `uv` factory; **not** in current source) |

Verified against the hub's installed package: `import { cn } from 'unocss-variants'` throws. `cnBase` concatenates and **keeps conflicts**, same as source `cn`:

```ts
import { cnBase } from 'unocss-variants';

cnBase('px-2 py-1', 'px-4'); // 'px-2 py-1 px-4'
cnBase('color-blue-500', 'color-red-500'); // 'color-blue-500 color-red-500'
cnBase('text-sm', { 'font-bold': true, 'hidden': false }); // 'text-sm font-bold'
```

Until the package is rebuilt and republished, import `cnBase` from npm and treat `cn` as types-only. After a matching publish, prefer `cn` as in source.

There is no `cx`, `cnMerge`, or merge config callback.

## `ClassValue` vs `cn`

`uv` options type `ClassValue` as strings, arrays, `null`, `undefined`, `0`, `0n`, and `false` — not class dictionaries.

The concatenator (`cn` / `cnBase`) additionally accepts numbers, booleans, and `{ [className]: any }` objects. That wider input is `CnOptions` in the types.


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.