World Hacker（ぎょうざブログ） 2024-09-22
【Tips - shadcn/ui】実例でわかるシリーズ
みなさんどうも、こんばんみ～。ぎょうざです。
はい、今更ながらUIコンポーネント群 shadcn/ui（シャッドシーエヌ ユーアイ）を利用する際に
ぎょうざが躓いたところを備忘録として記録しておきます。
同じようなケースあるいは現象で困っている方の参考になれば幸いです。
【目次】
＜Useful＞
▶
＜Error＞
▶npx shadcn-ui@latest addコマンド入力で任意のUIコンポーネントをインストールできない
- 現象：VScodeのターミナル（PowerShell）上で
npx shadcn-ui@latest add (任意のコンポーネント名)とコマンド入力すると、「'shadcn-ui' は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されていません。」と表示される。 - 原因：
shadcn-ui→shadcnにコマンド名が変更（※公式ドキュメント：https://ui.shadcn.com/docs/cli） - 解決策：コンポーネント追加したい場合は、
npx shadcn@latest add (任意のコンポーネント名)
⚠️
（※2024/09/22時点）
[email protected]のパッケージをインストールすれば
以下は、上記の原因にたどり着けていなかったときに
すでに table コンポーネントを追加しており、あとから新規に
[email protected]のパッケージをインストールすれば
npx shadcn-ui@latest add (任意のコンポーネント名)も実行可能。 以下は、上記の原因にたどり着けていなかったときに
npx shadcn-ui@latest add コマンドで すでに table コンポーネントを追加しており、あとから新規に
npx shadcn@latest add table した例 # 2024/09/22時点のコマンド実行結果
(base) PS D:\("任意のディレクトリ") > npx shadcn@latest add table
Need to install the following packages:
shadcn@2.0.8
Ok to proceed? (y) y
✔ Checking registry.
√ The file table.tsx already exists. Would you like to overwrite? ... yes
ℹ Updated 1 file:
- components\ui\table.tsx
＜Warn＞
▶
〆の一言
shadcn/uiは、ライブラリに非依存な優秀なUIコンポーネント群です。
独自にUIをカスタマイズする方法も充実しており、細かくUIを作り込みたい方におすすめです。
ここまで読んでいただき、ありがとうございました。
以上、ぎょうざでした。