ShadCN UI コマンドが実行できない場合の解決方法

問題の状況

ターミナルでShadCN UIのコマンドを実行しようとすると、次のエラーが発生する：

npx shadcn-ui@latest add button
sh: line 1: shadcn-ui: command not found

この問題は突然発生し、以下の試行では解決されません：

• インターネット接続のリセット
• プロジェクトの新規作成

根本原因

ShadCN UIがパッケージ名を変更しました：

• 従来: shadcn-ui
• 現在: shadcn

この変更により、古いコマンドは機能しなくなっています。

解決方法

最新コマンドの使用

1. プロジェクトの初期化：

   npx shadcn@latest init

   このコマンドで必要な依存関係がインストールされ、Tailwind CSSの設定とCSS変数が追加されます。

2. コンポーネントの追加：

   npx shadcn@latest add button

補足情報

• モノレポ使用時：-cオプションでワーキングディレクトリを指定

  npx shadcn@latest add button -c ./apps/www

• グローバルインストール：頻繁に使用する場合

  npm install -g shadcn

WSL環境での追加手順

Windows Subsystem for Linux (WSL) ユーザーは以下の手順が必要：

npm install shadcn-ui
npm audit fix --force
npx shadcn@latest init

注意

npm audit fix --forceは依存関係を強制的に更新するため、問題が発生する可能性があります

旧バージョンが必要な場合（非推奨）

どうしても古いバージョンが必要な場合：

npx shadcn-ui@0.8.0 init

重要

この方法は一時的な回避策であり、公式ドキュメントでは推奨されていません

ベストプラクティス

1. 公式ドキュメントを常に参照
   ShadCN CLI公式ドキュメントは頻繁に更新されます

2. 依存関係の定期的な更新：

   npm update shadcn

3. バージョン管理の問題回避：

   npx shadcn@latest add [component]  # 常に最新版を使用

変更の背景

ShadCN UIは2024年半ばに大規模なアップデートを実施し：

• CLIツールの最適化
• ユーザーエクスペリエンスの改善
• モノレポサポートの強化

これらの改良に伴い、コマンド体系が変更されました。

トラブルシューティング

上記で解決しない場合：

# キャッシュクリア
npm cache clean --force

# node_modules削除と再インストール
rm -rf node_modules
rm package-lock.json
npm install

プロジェクト構成に問題がある可能性もあるため、公式GitHubのIssuesも確認してください。