Zenn
✨

【1分で完了】Shadcn/uiのコンポーネントを一括インストールする方法

に公開
Next.js
React
UI
frontend
shadcn/ui
tech

Shadcn/uiを使っていると、毎回 npx shadcn@latest add を実行して、1コンポーネントずつ追加するのがちょっと面倒…
実は、一括インストールできる方法があるんです！

今回は、その便利な方法をご紹介します💡

✅ やり方

1. コマンドを実行

まず、ターミナルで以下のコマンドを入力します。

npx shadcn@latest add

2. 必要なコンポーネントを選択

CLIが起動し、以下のようなコンポーネント一覧が表示されます。

◯   accordion
◯   alert
◯   alert-dialog
◯   aspect-ratio
◯   avatar
◯   badge
◯   breadcrumb
◯   button
◯   calendar
◯ ↓ card
  • Space：選択/解除
  • A：すべて選択（一括インストールに便利！）

3. 完了🎉

選択を終えると、自動で必要なファイルが追加されます。
これで毎回コンポーネントを個別に追加する必要がなくなり、最初にまとめて導入できます！

📝 まとめ

  • Shadcn/uiは一括選択が可能！
  • npx shadcn@latest add を実行して A を押すだけ！
  • 初期セットアップ時にやっておくと効率アップ！

Shadcn/uiをこれから使い始める方、プロジェクト初期の効率化をしたい方は、ぜひ試してみてください〜！

Discussion