components.json

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

我们使用它来了解你的项目是如何设置的，以及如何生成符合你项目要求的组件。

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

pnpm dlx shadcn@latest init

详细信息请参见 CLI 部分。

$schema

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

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

style

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

{
  "style": "new-york"
}

default 样式已被弃用，请使用 new-york 样式。

tailwind

帮助 CLI 理解 Tailwind CSS 在你项目中的配置。

有关如何设置 Tailwind CSS 的详细信息，请参见 安装部分。

tailwind.config

tailwind.config.js 文件的位置路径。对于 Tailwind CSS v4，请保持为空。

{
  "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 Server Components 的支持。

当设置为 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

你实用函数的导入别名。

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