文档
components.json

components.json

你的项目的配置。

components.json 文件包含了你的项目的配置信息。

我们使用它来了解你的项目是如何设置的,以及如何生成为你项目定制的组件。

注意:components.json 文件是可选的,并且**只有在你使用 CLI** 添加组件到你的项目时才需要。如果你使用复制粘贴的方法,你不需要这个文件。

你可以在你的项目中运行以下命令来创建一个 components.json 文件

npx shadcn-solid@latest init

查看 CLI 部分 获取更多信息。

$schema

你可以在这里查看 components.json 的 JSON Schema。

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

tailwind

用于帮助 CLI 了解如何在你的项目中设置 Tailwind CSS 的配置。

请参阅(安装部分)[/docs/installation] 了解如何设置 Tailwind CSS。

tailwind.config

你的 tailwind.config.js 文件所在的路径。

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

tailwind.css.path

导入 Tailwind CSS 到你的项目中的 CSS 文件的路径。

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

tailwind.color

用于为你的组件生成默认的颜色调色板。**初始化后不能更改。**

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

tailwind.css.variable

你可以选择使用 CSS 变量或 Tailwind CSS 实用类来进行主题化。

要使用实用类进行主题化,请将 tailwind.cssVariables 设置为 false。对于 CSS 变量,请将 tailwind.cssVariables 设置为 true

components.json
{
  "tailwind": {
    "css": {
      "variabe": `true` | `false`
    }
  }
}

有关更多信息,请参阅(主题化文档)[/docs/theming]。

**初始化后不能更改。** 要在 CSS 变量和实用类之间切换,你必须删除并重新安装你的组件。

tailwind.prefix

用于你的 Tailwind CSS 实用类的(类名)前缀。组件将使用此前缀添加。

components.json
{
  "tailwind": {
    "prefix": "tw-"
  }
}

uno

用于帮助 CLI 了解如何在你的项目中设置 Uno CSS 的配置。

请参阅 安装部分 了解如何设置 Uno CSS。

uno.config

你的 uno.config.ts 文件所在的路径。

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

uno.css.path

导入 Uno CSS 到你的项目中的 CSS 文件的路径。

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

uno.color

用于为你的组件生成默认的颜色调色板。**初始化后不能更改。**

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

uno.css.variable

你可以选择使用 CSS 变量或 Uno CSS 实用类来进行主题化。

要使用实用类进行主题化,请将 uno.cssVariables 设置为 false。对于 CSS 变量,请将 uno.cssVariables 设置为 true

components.json
{
  "uno": {
    "css": {
      "variabe": `true` | `false`
    }
  }
}

有关更多信息,请参阅 主题化文档

**初始化后不能更改。** 要在 CSS 变量和实用类之间切换,你必须删除并重新安装你的组件。

uno.prefix

用于你的 Uno CSS 实用类的(类名)前缀。组件将使用此前缀添加。

components.json
{
  "uno": {
    "prefix": "uno-"
  }
}

alias

CLI 使用这些值和你的 tsconfig.jsonjsconfig.json 文件中的 paths 配置,来将生成的组件放置在正确的位置。

路径别名必须在你的 tsconfig.jsonjsconfig.json 文件中设置。

**重要:** 如果你正在使用 src 目录,请确保它包含在你的 tsconfig.jsonjsconfig.json 文件中的 paths 下。

alias.cn

你的实用函数的导入别名。

components.json
{
  "aliases": {
    "cn": "@/lib/utils"
  }
}

alias.component

你的组件的导入别名。

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

alias.ui

ui 组件的导入别名。

CLI 将使用 aliases.ui 值来确定在哪里放置你的 ui 组件。 如果你想自定义你的 ui 组件的安装目录,请使用此配置。

components.json
{
  "alias": {
    "ui": "@/ui"
  }
}