2026 年 9 月 - cn

コンポーネントは cn パッケージから cn をインポートするようになりました。依存関係は 2 つではなく 1 つになり、維持するローカルヘルパーは必要ありません。

すべての shadcn コンポーネントは、cn パッケージから cn をインポートするようになりました。

何年もの間、すべての shadcn プロジェクトは lib/utils.ts の同じ 5 行から始まっていました。clsx をインポートし、twMerge をインポートし、一方をもう一方でラップして cn としてエクスポートする、というものです。それでも動作はしましたが、2 つの依存関係とヘルパー関数を、すべてのプロジェクトとレジストリにコピーする必要があるということでもありました。

そこでこれをパッケージに切り出しました。cn は twMerge(clsx(...)) のドロップイン代替品です。より小さく、より高速で、同じ API のまま提供されるため、呼び出し側のコードは何も変更する必要がありません。

import { cn } from "cn"
 
;<div className={cn("flex items-center", className)} />

何が変わったのか

レジストリコンポーネント、ブロック、例では、@/lib/utils の代わりに cn パッケージから cn をインポートするようになりました。
npx shadcn init は、cn をインストールし、一行の lib/utils.ts を生成します。
cn を使用するすべてのレジストリアイテムは、これを依存関係として宣言しています。この変更より前に作成されたプロジェクトでも、npx shadcn add を実行すればインストールされます。