components.json

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

我们使用它来了解项目的设置方式，以及如何生成针对项目定制的组件。

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

npx shadcn@latest init

有关更多信息，请参阅 CLI 部分。

$schema

可以在 此处 查看 components.json 的 JSON Schema。

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

style

组件的样式。**初始化后无法更改。**

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

tailwind

配置，帮助 CLI 了解项目中 Tailwind CSS 的设置方式。

有关如何设置 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`
}

aliases

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

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

aliases.utils

导入实用程序函数的别名。

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

aliases.components

导入组件的别名。

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

aliases.ui

导入 ui 组件的别名。

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

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

aliases.lib

导入 lib 函数（如 format-date 或 generate-id）的别名。

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

aliases.hooks

导入 hooks （如 use-media-query 或 use-toast）的别名。

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