components.json

components.json 文件保存项目的配置。

¥The components.json file holds configuration for your project.

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

¥We use it to understand how your project is set up and how to generate components customized for your project.

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

¥You can create a components.json file in your project by running the following command:

pnpm dlx shadcn@latest init

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

¥See the CLI section for more information.

$schema

你可以查看 components.json 此处 的 JSON 模式。

¥You can see the JSON Schema for components.json here.

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

style

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

¥The style for your components. This cannot be changed after initialization.

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

tailwind

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

¥Configuration to help the CLI understand how Tailwind CSS is set up in your project.

有关如何设置 Tailwind CSS，请参阅 installation section。

¥See the installation section for how to set up Tailwind CSS.

tailwind.config

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

¥Path to where your tailwind.config.js file is located.

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

tailwind.css

将 Tailwind CSS 导入项目的 CSS 文件的路径。

¥Path to the CSS file that imports Tailwind CSS into your project.

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

tailwind.baseColor

这用于为你的组件生成默认调色板。初始化后无法更改。

¥This is used to generate the default color palette for your components. This cannot be changed after initialization.

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

tailwind.cssVariables

你可以选择使用 CSS 变量或 Tailwind CSS 实用程序类进行主题设置。

¥You can choose between using CSS variables or Tailwind CSS utility classes for theming.

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

¥To use utility classes for theming set tailwind.cssVariables to false. For CSS variables, set tailwind.cssVariables to true.

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

有关更多信息，请参阅 theming docs。

¥For more information, see the theming docs.

初始化后无法更改。要在 CSS 变量和实用程序类之间切换，你必须删除并重新安装组件。

¥This cannot be changed after initialization. To switch between CSS variables and utility classes, you'll have to delete and re-install your components.

tailwind.prefix

用于 Tailwind CSS 实用程序类的前缀。组件将使用此前缀添加。

¥The prefix to use for your Tailwind CSS utility classes. Components will be added with this prefix.

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

rsc

是否启用对 React Server Components 的支持。

¥Whether or not to enable support for React Server Components.

当设置为 true 时，CLI 会自动将 use client 指令添加到客户端组件。

¥The CLI automatically adds a use client directive to client components when set to true.

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

tsx

在 TypeScript 或 JavaScript 组件之间进行选择。

¥Choose between TypeScript or JavaScript components.

将此选项设置为 false 允许将组件添加为带有 .jsx 文件扩展名的 JavaScript。

¥Setting this option to false allows components to be added as JavaScript with the .jsx file extension.

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

aliases

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

¥The CLI uses these values and the paths config from your tsconfig.json or jsconfig.json file to place generated components in the correct location.

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

¥Path aliases have to be set up in your tsconfig.json or jsconfig.json file.

aliases.utils

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

¥Import alias for your utility functions.

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

aliases.components

导入你的组件的别名。

¥Import alias for your components.

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

aliases.ui

导入 ui 组件的别名。

¥Import alias for ui components.

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

¥The CLI will use the aliases.ui value to determine where to place your ui components. Use this config if you want to customize the installation directory for your ui components.

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

aliases.lib

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

¥Import alias for lib functions such as format-date or generate-id.

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

aliases.hooks

导入 hooks 的别名，例如 use-media-query 或 use-toast。

¥Import alias for hooks such as use-media-query or use-toast.

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