components.json

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

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

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

npx shadcn@latest init

更多信息请查看 CLI section。

$schema

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

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

风格

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

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

tailwind

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

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

tailwind.config

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

{
  "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"
  }
}