shadcn/uiを理解しよう

1. 技術的基盤

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

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

init
- 目的: 新規または既存プロジェクトでshadcn/uiを初期化
- 実行例:
```
pnpm dlx shadcn@latest init
# npm, yarn, bunなどでも同様
```
- 主なオプション:
  - -y: 確認スキップ
  - -d: デフォルト設定使用
  - -c <path>: 作業ディレクトリ指定
  - --css-variables: CSS変数の使用有無
add
components.json
- 中心設定ファイル。コンポーネントスタイル、Tailwind設定、RSCの有無、TSX/JS選択、エイリアスを管理。
build
- レジストリJSON生成用。日常的な使用頻度は低い。

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

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

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

components.jsonで`

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

app/globals.cssにて:

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

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

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

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

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