components.json

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

shadcn/ui 用它来了解项目是如何设置的，以及如何为您的项目生成个性化的组件。

您可以通过运行以下命令在项目中创建 components.json :

pnpm dlx shadcn@latest init

更多信息请查看 CLI section。

$schema

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

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

风格

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

{
  "style": "new-york"
}

The default style has been deprecated. Use the new-york style instead.

tailwind

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

如何设置 Tailwind CSS，请查看 installation section.

tailwind.config

Path to where your tailwind.config.js file is located. For Tailwind CSS v4, leave this blank.

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

tailwind.css

将 CSS 文件 导入到项目 Tailwind CSS 配置中。

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

tailwind.baseColor

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

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

tailwind.cssVariables

您可以选择使用 CSS 变量或 Tailwind CSS 工具类进行主题设置。

使用 Tailwind CSS 工具类进行主题设置 set tailwind.cssVariables to false. 使用 CSS variables, set tailwind.cssVariables to true.

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

更多信息请查看 主题文档.

初始化后无法更改 要在 Tailwind CSS 的 CSS 变量和工具类之间切换，您必须删除并重新安装组件。

tailwind.prefix

用于 Tailwind CSS 工具类的前缀，将添加带有此前缀的组件。

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

rsc

是否启用对 React Server Component 的支持

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

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

tsx

选择使用 TypeScript 或 JavaScript 组件

设置改选项为 false 允许组件添加扩展名 .jsx 的文件。

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

aliases

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

必须在 tsconfig.json 或 jsconfig.json 文件中设置 Path aliases。

aliases.utils

设置 utility 函数别名。

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

aliases.components

设置组件别名。

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

aliases.ui

设置 ui组件的别名。

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

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

aliases.lib

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

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

aliases.hooks

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

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