94.2k

components.json

上一个下一个

项目配置。

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

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

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

pnpm dlx shadcn@latest init

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

$schema

你可以在此处查看 components.json 的 JSON Schema。

components.json
{
  "$schema": "https://ui.shadcn.org.cn/schema.json"
}

风格

你的组件风格。此项在初始化后无法更改。

components.json
{
  "style": "new-york"
}

default 风格已被弃用。请改用 new-york 风格。

tailwind

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

有关如何设置 Tailwind CSS，请参阅安装部分。

tailwind.config

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

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

tailwind.css

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

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

tailwind.baseColor

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

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

tailwind.cssVariables

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

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

components.json
{
  "tailwind": {
    "cssVariables": `true` | `false`
  }
}

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

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

tailwind.prefix

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

components.json
{
  "tailwind": {
    "prefix": "tw-"
  }
}

rsc

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

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

components.json
{
  "rsc": `true` | `false`
}

tsx

选择 TypeScript 或 JavaScript 组件。

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

components.json
{
  "tsx": `true` | `false`
}

别名

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

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

aliases.utils

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

components.json
{
  "aliases": {
    "utils": "@/lib/utils"
  }
}

aliases.components

你的组件的导入别名。

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

aliases.ui

ui 组件的导入别名。

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

components.json
{
  "aliases": {
    "ui": "@/app/ui"
  }
}

aliases.lib

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

components.json
{
  "aliases": {
    "lib": "@/lib"
  }
}

aliases.hooks

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

components.json
{
  "aliases": {
    "hooks": "@/hooks"
  }
}

注册表

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

有关详细信息，请参阅命名空间注册表文档。

基本配置

使用 URL 模板配置注册表

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

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

带身份验证的高级配置

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

components.json
{
  "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} 的环境变量会自动从你的环境中扩展。

使用命名空间注册表

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

# 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

示例：多注册表设置

components.json
{
  "registries": {
    "@shadcn": "https://ui.shadcn.org.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}"
      }
    }
  }
}

此配置允许你

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

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