npx shadcn-ui@latest init : initialiser la configuration et les dépendances d'un nouveau projet

"shadcn-ui : commande introuvable" - utilisez le nouveau nom du CLI

De nombreux tutoriels et anciennes documentations font encore référence à npx shadcn-ui@latest init ou npx shadcn-ui@latest add button. Si vous les exécutez et obtenez sh: shadcn-ui: command not found (ou un message similaire), c'est parce que le package CLI a été renommé de shadcn-ui en shadcn. La solution officielle, telle qu'elle est documentée et discutée par les utilisateurs (par exemple sur Stack Overflow), consiste à utiliser le nouveau nom du package :

• Au lieu de : npx shadcn-ui@latest init
• Utilisez : npx shadcn@latest init

C'est la même chose pour l'ajout de composants : utilisez npx shadcn@latest add button, et non npx shadcn-ui@latest add button. Inutile de réinstaller un ancien package shadcn-ui - gardez le CLI actuel et la documentation officielle du CLI.

Ce que fait la commande init

D'après la documentation du CLI shadcn, la commande init :

• Initialise la configuration et les dépendances pour un projet nouveau ou existant
• Installe les dépendances requises
• Ajoute l'utilitaire cn (pour fusionner les noms de classes, par exemple avec Tailwind)
• Configure les variables CSS pour le theming

Exécutez-la une fois à la racine de votre projet (ou dans le répertoire app d'un monorepo) avant d'ajouter des composants.

Comment exécuter init

Vous pouvez utiliser l'une des commandes suivantes, selon votre gestionnaire de paquets. Toutes utilisent le nom de package actuel shadcn :

# With pnpm (recommended in docs)
pnpm dlx shadcn@latest init

# With npm
npx shadcn@latest init

# With yarn
yarn dlx shadcn@latest init

# With bun
bunx shadcn@latest init

La commande va configurer votre projet : installer les dépendances, ajouter l'utilitaire cn et configurer les variables CSS de Tailwind. Il se peut qu'on vous demande de choisir un style, une couleur de base et l'utilisation ou non d'un répertoire src, sauf si vous sautez les invites avec -y.

Options de init

Les options suivantes sont disponibles pour shadcn init (d'après la documentation du CLI) :

• -t, --template <template> - modèle à utiliser : next ou next-monorepo.
• -b, --base-color <base-color> - couleur de base : neutral, gray, zinc, stone ou slate.
• -y, --yes - ignorer la demande de confirmation (par défaut : true).
• -f, --force - forcer l'écrasement de la configuration existante (par défaut : false).
• -c, --cwd <cwd> - répertoire de travail (par défaut : le répertoire courant). Utile dans les monorepos, par exemple -c ./apps/www.
• -s, --silent - réduire la sortie au silence (par défaut : false).
• --src-dir - utiliser le répertoire src lors de la création d'un nouveau projet.
• --no-src-dir - ne pas utiliser le répertoire src.
• --css-variables - utiliser les variables CSS pour le theming (par défaut : true).
• --no-css-variables - ne pas utiliser les variables CSS pour le theming.
• --no-base-style - ne pas installer le style de base de shadcn.

Exemple avec options (par exemple pour une application Next.js dans un monorepo avec une couleur de base précise) :

npx shadcn@latest init -t next -b zinc -c ./apps/web -y

Après init : ajouter des composants

Une fois init terminé, ajoutez des composants avec la commande add :

npx shadcn@latest add button
npx shadcn@latest add card dialog
npx shadcn@latest add -a   # add all available components

Utilisez -c <path> si votre application se trouve dans un sous-répertoire (par exemple -c ./apps/www). Pour la référence complète du CLI, y compris view, search, list, build et migrate, consultez la documentation du CLI shadcn.

Référence rapide

• Si npx shadcn-ui@latest init renvoie « command not found », utilisez npx shadcn@latest init (et la même chose pour add, view, etc.).
• Init installe les dépendances, ajoute l'utilitaire cn et configure les variables CSS.
• Utilisez -c <cwd> dans les monorepos ; utilisez -y pour ignorer les invites.
• Documentation officielle du CLI : ui.shadcn.com/docs/cli. Correctif communautaire pour les « commandes qui ne fonctionnent pas » : Stack Overflow.