components.json

components.json ファイルには、プロジェクトの設定が保存されています。

これを使用して、プロジェクトの設定方法と、プロジェクト用にカスタマイズされたコンポーネントを生成する方法を把握します。

次のコマンドを実行すると、プロジェクトに components.json ファイルを作成できます。

npx shadcn-ui@latest init

詳細については、CLI セクション を参照してください。

$schema

components.json の JSON スキーマは こちら で確認できます。

{
  "$schema": "https://ui.shadcn.com/schema.json"
}

スタイル

コンポーネントのスタイル。これは初期化後に変更できません。

{
  "style": "default" | "new-york"
}

tailwind

プロジェクトで Tailwind CSS がどのように設定されているかを CLI が理解するための設定です。

Tailwind CSS の設定方法については、インストール セクション を参照してください。

tailwind.config

tailwind.config.js ファイルのパス。

{
  "tailwind": {
    "config": "tailwind.config.js" | "tailwind.config.ts"
  }
}

tailwind.css

プロジェクトに Tailwind CSS をインポートする CSS ファイルへのパス。

{
  "tailwind": {
    "css": "styles/global.css"
  }
}

tailwind.baseColor

コンポーネントの既定のカラールートパレットを生成するために使用します。これは初期化後に変更できません。

{
  "tailwind": {
    "baseColor": "gray" | "neutral" | "slate" | "stone" | "zinc"
  }
}

tailwind.cssVariables

テーマ設定に CSS 変数を使用するか Tailwind CSS ユーティリティクラスを使用するかを選択できます。

ユーティリティクラスでテーマ設定を行うには、tailwind.cssVariables を false に設定します。CSS 変数を使用するには、tailwind.cssVariables を true に設定します。

{
  "tailwind": {
    "cssVariables": `true` | `false`
  }
}

詳細については、テーマ設定ドキュメント を参照してください。

**これは初期化後に変更できません。**CSS 変数とユーティリティクラスを切り替えるには、コンポーネントを削除して再インストールする必要があります。

tailwind.prefix

Tailwind CSS ユーティリティクラスに使用するプレフィックス。このプレフィックスを使用してコンポーネントが追加されます。

{
  "tailwind": {
    "prefix": "tw-"
  }
}

rsc

React サーバーコンポーネントのサポートを有効にするかどうか。

true に設定すると、CLI はクライアントコンポーネントに use client ディレクティブを自動的に追加します。

{
  "rsc": `true` | `false`
}

tsx

TypeScript または JavaScript のコンポーネントを選択します。

このオプションを false に設定すると、コンポーネントは .jsx ファイル拡張子を使用して JavaScript として追加できます。

{
  "tsx": `true` | `false`
}

別名

CLI はこれらの値と tsconfig.json または jsconfig.json ファイルの paths 設定を使用して、生成されたコンポーネントを正しい場所に配置します。

パスエイリアスは tsconfig.json または jsconfig.json ファイルで設定する必要があります。

別名.utils

ユーティリティ関数用のインポートエイリアス。

{
  "aliases": {
    "utils": "@/lib/utils"
  }
}

別名.components

コンポーネント用のインポートエイリアス。

{
  "aliases": {
    "components": "@/components"
  }
}

別名.ui

ui コンポーネント用のインポートエイリアス。

CLI は aliases.ui 値を使用して ui コンポーネントの配置場所を決定します。ui コンポーネントのインストールディレクトリをカスタマイズする場合は、この設定を使用します。

{
  "aliases": {
    "ui": "@/app/ui"
  }
}