cn — class-name merge utility

@interlace/ui — the cn() helper, alias-compatible with shadcn. Merges Tailwind class lists deterministically.

foundationserverlibv1.1.0

cn — class-name merge utility — live renderutilities-cn--default ↗

Rendered from the story the storybook (a11y) CI gate runs axe against — the preview can't show something that hasn't been verified.

Install

Two equivalent paths — the URL works in any shadcn-CLI setup; the alias works once you've registered @interlace in your components.json.

Via shadcn URL

npx shadcn@latest add https://ds.interlace.tools/r/cn.json

With the @interlace alias

npx shadcn@latest add @interlace/cn

History

This component is at v1.1.0, first shipped in @interlace/ui 1.0.0. The version is stamped as a banner into the file the install writes, so the copy in your tree says which one you have — compare it with the number above before deciding whether to re-run the install.

@interlace/ui 1.0.01 entry

Addedminor
Day-one install surfaces: three starter bundles that pull a curated set of items in one command, and the two library utilities every primitive needs.
Components

Import

2 named exports — pull the parts you need.

Public API

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

Accessibility

Every story for this component is rendered headlessly and checked with axe-core (wcag2aa, wcag22aa, best-practice, ACT) on every PR. That gate has no continue-on-error, so what ships has zero known violations.

What follows is what static analysis can see. Axe cannot press a key and never sees an overlay open, so the operable-without-a-mouse claim lives in Behavior instead, where the keyboard path is replayed step by step.

Focus + keyboard behaviour: Native element semantics — no interaction layer to get wrong.
Focus ring (WCAG 2.2 SC 2.4.13): Not focusable — no focus indicator required.
Reduced motion: No animation to gate.
ARIA in the source: None — semantics come from the element or the Base UI primitive rather than hand-written ARIA.

Examples

1 more state from the same story file.

competing sizesutilities-cn--competing-sizes ↗

Dependencies

Base UI primitive: Native / no Base UI dependency
Lucide icons: none
NPM dependencies: clsx
tailwind-merge
Registry dependencies: none

Source

The full implementation — lib/utils.ts once installed.

62 lines · TypeScript

github ↗

import { clsx, type ClassValue } from 'clsx';

// @interlace/cn v1.1.0 — Interlace design system.
// Docs, props and live preview: https://ds.interlace.tools/c/cn
// What changed since: https://ds.interlace.tools/c/cn#history
// Generated banner — keep it, the upgrade diff reads this version.

import { extendTailwindMerge } from 'tailwind-merge';

/**
 * The DS type scale, as declared in `styles/foundation.css`.
 *
 * Tailwind v4 generates a `text-<name>` utility for every `--text-<name>` theme
 * key, which collides head-on with `text-<color>`. tailwind-merge cannot tell
 * them apart from the class name alone — `text-ui` looks exactly like a colour
 * utility — so **with no configuration it files our size tokens under
 * `text-color` and deletes them whenever a real colour utility is also
 * present.**
 *
 * That is not theoretical. `twMerge('text-ui-sm font-medium text-foreground')`

…42 more lines…

Registry JSON

The raw registry record — what the shadcn CLI fetches.

/r/cn.json