shadcn/ui エンジニア向けUI開発効率化ガイド

shadcn/uiを理解しよう

1. 技術的基盤

shadcn/uiコンポーネントは、以下の2つを組み合わせて実現されています。

• Radix UIプリミティブ: アクセシビリティとコア機能を担うヘッドレスUIプロバイダー。機能的な骨組みを提供します。
• Tailwind CSS: ユーティリティファーストのアプローチで、柔軟かつ効率的なスタイリングを実現します。

2. インストールとプロジェクト設定

shadcn/uiの導入は専用CLIで行います。以下ではNext.jsとViteの両方での手順を解説します。

2.1 CLIコマンドの活用

• init

  • 目的: 新規または既存プロジェクトでshadcn/uiを初期化
  • 実行例:

    pnpm dlx shadcn@latest init
    # npm, yarn, bunなどでも同様
    

  • 主なオプション:
    • -y: 確認スキップ
    • -d: デフォルト設定使用
    • -c <path>: 作業ディレクトリ指定
    • --css-variables: CSS変数の使用有無

• add

  • 目的: 特定コンポーネントのソースコードと依存関係をプロジェクトにコピー
  • 実行例:

    pnpm dlx shadcn@latest add button card
    

  • 主なオプション:
    • -y: 確認スキップ
    • -o: 既存ファイル上書き
    • -a: 全コンポーネント追加
    • -p <path>: 追加先パス指定

• components.json

  • 中心設定ファイル。コンポーネントスタイル、Tailwind設定、RSCの有無、TSX/JS選択、エイリアスを管理。

• build

  • レジストリJSON生成用。日常的な使用頻度は低い。

2.2 Next.jsでの統合

1. create-next-appでプロジェクト作成または既存プロジェクトを準備。
2. pnpm dlx shadcn@latest init を実行し、プロンプトに従う。
3. 必要なコンポーネントを追加:

   pnpm dlx shadcn@latest add button
   

4. コンポーネントをインポートして使用:

   import { Button } from "@/components/ui/button"
   

2.3 Viteでの統合

1. pnpm create vite@latest でReact+TypeScriptテンプレートを選択。
2. Tailwind CSSとViteプラグインをインストールし、src/index.cssを設定。
3. tsconfig.jsonとtsconfig.app.jsonでbaseUrlとpathsを設定。
4. 必要な型定義を追加し、vite.config.tsでパスエイリアスを設定。
5. pnpm dlx shadcn@latest init を実行。
6. コンポーネントを追加し、インポートして使用。

3. カスタマイズとテーマ設定

コンポーネントの外観はTailwindユーティリティまたはCSS変数で調整できます。

3.1 CSS変数アプローチ（推奨）

1. components.jsonで`

   {
     "tailwind": {
       "cssVariables": true
     }
   }
   

2. app/globals.cssにて:

   :root {
     --background: 255 255 255;
     --foreground: 0 0 0;
   }
   .dark {
     --background: 0 0 0;
     --foreground: 255 255 255;
   }
   

3. コンポーネント内部で変数を使用:

   <div className="bg-[rgb:var(--background)] text-[rgb:var(--foreground)]">...
   

3.2 ユーティリティクラスアプローチ

components.jsonでcssVariables: falseに設定し、直接Tailwindクラスを適用:

<div className="bg-zinc-950 dark:bg-white text-white dark:text-black">...

4. 機能拡張：エコシステム

4.1 公式拡張

• Blocks: ログインフォームやダッシュボードなどのプリセットレイアウト
• Charts: Rechartsを基盤に、shadcn/uiテーマで統一されたチャートコンポーネント

4.2 コミュニティコンポーネント

• Awesome Shadcn UI: プラグインやボイラープレートのリスト
• 拡張例:
  • 日付ピッカー／日付範囲ピッカー
  • OTP入力、タグ入力、WYSIWYGエディタなど
• ライブラリ例: shadcn-extension, aceternity-ui

5. デザインとコードの橋渡し：Figma連携

• Figmaキット: Default/New Yorkテーマを反映した公式・サードパーティ製キット
• デザインと実装の一貫性を高め、開発とデザインチームのコラボレーションを促進

6. 結論：戦略的な選択

選択すべき理由

• 深いカスタマイズが最優先のプロジェクト
• コンポーネントの実装を直接理解・変更したい
• ブラックボックス化を避け、コード所有権を重視

代替案検討の理由

• 最小限のスタイリングで迅速に開発したい → MUI など事前スタイル付きライブラリ
• 確立されたデザインシステムへの準拠が必要
• パッケージマネージャー更新による自動メンテナンスを好む