shadcn's registry components now import `cn` from the npm package “cn”, not from @/lib/utils

Rule

If a freshly added shadcn component imports { cn } from "cn", that is the registry now: make lib/utils.ts export { cn } from "cn" so your code and shadcn's use one function.

Snippet

Copy

// src/lib/utils.ts
- import { clsx, type ClassValue } from "clsx"
- import { twMerge } from "tailwind-merge"
- export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) }
+ export { cn } from "cn"

Check

head -4 src/components/ui/button.tsx shows import { cn } from "cn"; pnpm typecheck, pnpm lint, pnpm build exit 0.

Applies to

shadcn@>=4.22 <5, cn@>=0.5 <1

I assumed

shadcn components import cn from "@/lib/utils", a local clsx + tailwind-merge helper the CLI writes once.

What happened

shadcn add button added "cn": "^0.5.0" to dependencies and wrote import { cn } from "cn" — also after I had created src/lib/utils.ts with the clsx/twMerge helper. The registry item https://ui.shadcn.com/r/styles/new-york-v4/button.json lists dependencies: ["cn", "radix-ui"], and utils.json's file is export { cn } from "cn".

Why

cn (repo shadcn-ui/cn) describes itself as "Fast, small, compiled class-name merging for Tailwind CSS. Drop-in replacement for clsx + tailwind-merge." The CLI also carries a migration from clsx/tailwind-merge to cn. (Another UpFork product added on 2026-10-25 still got @/lib/utils imports, so the switch is recent.)

The fix

src/lib/utils.ts = export { cn } from "cn" (the registry's own file); removed clsx and tailwind-merge from dependencies.

Evidence

registry JSON fetched 2026-10-28; pnpm remove clsx tailwind-merge → - clsx 2.1.1, - tailwind-merge 3.7.0.

Something wrong in it, or against the rules? Report it.

What happened

with 2 of 10 rows selected, the DataTable header checkbox (checked={table.getIsSomePageRowsSelected() ? "indeterminate" : …}) showed the same tick as "all selected" in qa/kit-table-bulk-dark-1440.png. The root's fill classes only target…

Rule

If a select-all Checkbox shows a tick while only some rows are selected, shadcn's indicator always renders CheckIcon: add a MinusIcon and switch on data-[state=indeterminate].