components.json

components.jsonファイルは、あなたのプロジェクトの設定を保持します。

私たちはこのファイルを使って、あなたのプロジェクトがどのように設定されているかを理解し、あなたのプロジェクトに合わせてカスタマイズされたコンポーネントを生成します。

注：components.jsonファイルはオプションであり、CLIを使用してプロジェクトにコンポーネントを追加する場合にのみ必要です。コピー＆ペーストで追加する場合は、このファイルは必要ありません。

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

npx shadcn-solid@latest init

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

$schema

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

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

tailwind

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

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

tailwind.config

あなたのtailwind.config.jsファイルがどこにあるかのパスです。

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

tailwind.css.path

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

{
  "tailwind": {
    "css": {
      "path": "src/app.css"
    }
  }
}

tailwind.color

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

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

tailwind.css.variable

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

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

{
  "tailwind": {
    "css": {
      "variabe": `true` | `false`
    }
  }
}

詳細については、(テーマ設定のドキュメント)[/docs/theming]を参照してください。

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

tailwind.prefix

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

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

uno

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

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

uno.config

あなたのuno.config.tsファイルがどこにあるかのパスです。

{
  "uno": {
    "config": "uno.config.ts"
  }
}

uno.css.path

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

{
  "uno": {
    "css": {
      "path": "src/app.css"
    }
  }
}

uno.color

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

{
  "uno": {
    "color": "gray" | "neutral" | "slate" | "stone" | "zinc"
  }
}

uno.css.variable

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

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

{
  "uno": {
    "css": {
      "variabe": `true` | `false`
    }
  }
}

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

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

uno.prefix

Uno CSSユーティリティクラスに使用するプレフィックスです。コンポーネントはこのプレフィックス付きで追加されます。

{
  "uno": {
    "prefix": "uno-"
  }
}

alias

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

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

重要：srcディレクトリを使用している場合、それがtsconfig.jsonまたはjsconfig.jsonファイルのpathsに含まれていることを確認してください。

alias.cn

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

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

alias.component

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

{
  "alias": {
    "component": "@/components"
  }
}

alias.ui

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

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

{
  "alias": {
    "ui": "@/ui"
  }
}