shadcn/ui は『UI ライブラリの新しい配り方』
shadcn/ui は npm パッケージではなく、コードを直接プロジェクトにコピペする方式の UI ライブラリで、急速に標準化しつつあります。本記事では編集部の視点で、実務での使い方を公開情報をもとに整理します。Tailwind CSS 実践 もご参考に。
shadcn/ui の特徴
(1) 非 npm：CLI でコードをコピー。(2) カスタマイズ自由：手元のコードを直接編集。(3) Radix UI ベース：a11y 対応。(4) Tailwind CSSでスタイル。(5) TypeScript First。バージョンアップの恩恵を諦める代わりに完全な自由を手にします。
初期セットアップ
(1) npx shadcn-ui init。(2) components.json：プロジェクト設定。(3) パスエイリアス：@/components/ui。(4) tailwind 設定：theme + plugins。(5) 初期コンポーネント追加。
コンポーネントの活用
(1) Button/Input/Card：基本セット。(2) Dialog/Sheet/Popover：オーバーレイ系。(3) Form (react-hook-form 統合)。(4) Data Table：TanStack Table 統合。(5) Charts (Recharts)。TanStack Query 実践 もご参考に。
カスタマイズパターン
(1) variant 追加：cva で。(2) スタイル拡張：cn() で merge。(3) 独自コンポーネント：同パターンで作成。(4) テーマ変更：CSS Variables。(5) Dark mode：class ベース。
v0.dev との連携
(1) v0.dev：Vercel の AI UI 生成サービス。(2) shadcn/ui をベースに生成。(3) プロンプト→UI→コピペ。(4) 変更も自然言語で。(5) MVP 開発を爆速化。MVP 構築 もご参考に。
運用上の注意点
(1) アップデート手動：CLI で個別更新。(2) 共通変更の伝播：base コンポーネント設計。(3) 大規模では設計力必要。(4) テスト：自社で書く。(5) デザイントークン：CSS Variables 統一。Tailwind CSS 実践 もご参考に。
失敗しがちなパターン
(1) npm 感覚で更新待ち。(2) カスタマイズ放置：脆弱性残存。(3) 命名規約バラバラ。(4) テーマ統一なし。(5) 大規模アプリでの保守困難。対策は、(1)更新ポリシー、(2)定期見直し、(3)Style Guide、(4)CSS Variables 集約、(5)レイアウト分離、です。