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:

pnpmnpmyarnbun
pnpm dlx shadcn@latest init
Copy

有关更多信息，请参阅 命令行接口部分。

$schema

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

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

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

style

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

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

Copy{
  "style": "new-york"
}

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

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

tailwind

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

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

请参阅 安装部分了解如何设置 Tailwind CSS。

tailwind.config

到你的 tailwind.config.js 文件所在位置的路径。对于 Tailwind CSS v4，请留空。

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

Copy{
  "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.

Copy{
  "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.

Copy{
  "tailwind": {
    "baseColor": "gray" | "neutral" | "slate" | "stone" | "zinc" | "mauve" | "olive" | "mist" | "taupe"
  }
}

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.

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

有关更多信息，请参阅 主题文档。

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

tailwind.prefix

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

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

Copy{
  "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.

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

tsx

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

🌐 Choose between TypeScript or JavaScript components.

将此选项设置为 false 允许将组件作为 JavaScript 添加，并使用 .jsx 文件扩展名。

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

Copy{
  "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.

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

aliases.components

导入你的组件的别名。

🌐 Import alias for your components.

Copy{
  "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.

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

aliases.lib

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

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

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

aliases.hooks

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

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

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

registries

为你的项目配置多个资源注册表。这使你能够从包括私有注册表在内的各种来源安装组件、库、实用程序和其他资源。

🌐 Configure multiple resource registries for your project. This allows you to install components, libraries, utilities, and other resources from various sources including private registries.

请参阅 命名空间注册表文档以获取详细信息。

基本配置

🌐 Basic Configuration

使用 URL 模板配置注册表：

🌐 Configure registries with URL templates:

Copy{
  "registries": {
    "@v0": "https://v0.dev/chat/b/{name}",
    "@acme": "https://registry.acme.com/{name}.json",
    "@internal": "https://internal.company.com/{name}.json"
  }
}

安装时，{name} 占位符会被替换为资源名称。

🌐 The {name} placeholder is replaced with the resource name when installing.

带认证的高级配置

🌐 Advanced Configuration with Authentication

对于需要身份验证的私有注册表：

🌐 For private registries that require authentication:

Copy{
  "registries": {
    "@private": {
      "url": "https://api.company.com/registry/{name}.json",
      "headers": {
        "Authorization": "Bearer ${REGISTRY_TOKEN}",
        "X-API-Key": "${API_KEY}"
      },
      "params": {
        "version": "latest"
      }
    }
  }
}

格式为 ${VAR_NAME} 的环境变量会自动从你的环境中展开。

🌐 Environment variables in the format ${VAR_NAME} are automatically expanded from your environment.

使用命名空间注册表

🌐 Using Namespaced Registries

配置完成后，使用命名空间语法安装资源：

🌐 Once configured, install resources using the namespace syntax:

Copy# Install from a configured registry
npx shadcn@latest add @v0/dashboard
 
# Install from private registry
npx shadcn@latest add @private/button
 
# Install multiple resources
npx shadcn@latest add @acme/header @internal/auth-utils

示例：多注册表设置

🌐 Example: Multiple Registry Setup

Copy{
  "registries": {
    "@shadcn": "https://shadcn.nodejs.cn/r/{name}.json",
    "@company-ui": {
      "url": "https://registry.company.com/ui/{name}.json",
      "headers": {
        "Authorization": "Bearer ${COMPANY_TOKEN}"
      }
    },
    "@team": {
      "url": "https://team.company.com/{name}.json",
      "params": {
        "team": "frontend",
        "version": "${REGISTRY_VERSION}"
      }
    }
  }
}

此配置允许你：

🌐 This configuration allows you to:

• 从 shadcn/ui 安装公共组件
• 通过身份验证访问私有公司 UI 组件
• 使用带版本控制的团队专用资源

有关身份验证的更多信息，请参阅 身份验证文档。