components.json

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

我们用该配置文件来了解项目的设置方式，以及如何为项目生成定制化的组件。

运行以下命令可为项目创建一个 components.json 配置文件：

npx shadcn@latest init

更多信息请参阅 CLI section 。

$schema

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

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

样式

组件的样式。**初始化之后则不能更改。

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

tailwind

Tailwind CSS 的配置信息，帮助 CLI 了解 Tailwind CSS 在你的项目中是如何设置的。

有关如何设置 Tailwind CSS，请参阅 安装章节。

tailwind.config

tailwind.config.js 配置文件的路径。

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

tailwind.css

Path to the CSS file that imports Tailwind CSS into your project. 一个指向 CSS 文件的路径，该 CSS 文件用于导入（import） Tailwind 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 时，组件将用 JavaScript 编码，文件扩展名为 .jsx。

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

aliases

CLI 会使用这些值和 tsconfig.json 或 jsconfig.json 文件中的 paths 配置，将生成的组件放到正确的位置。

路径别名必须在 tsconfig.json 或 jsconfig.json 文件中设置。

aliases.utils

为实用工具函数设置 import 别名。

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

aliases.components

为组件设置 import 别名。

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

aliases.ui

为 ui 组件设置 import 别名。

CLI 将使用 aliases.ui 的值来确定放置 ui 组件的位置。如果您想自定义 ui 组件的安装目录，请使用此配置。

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

aliases.lib

为 lib 函数（例如 format-date 或 generate-id）设置 import 别名。

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

aliases.hooks

为 hooks（钩子函数。例如 use-media-query 或 use-toast）设置 import 别名。

{
  "aliases": {
    "hooks": "@/hooks"
  }
}