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

我们使用它来了解你的项目是如何设置的，以及如何生成自定义组件。

注意：components.json 文件是可选的，只有在你使用 CLI 添加组件到项目时才需要。如果你使用复制粘贴的方法，则不需要此文件。

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

pnpm npmyarn bun

  1. pnpm dlx shadcn@latest init

查看更多信息，请参阅 CLI 部分。

$schema

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

components.json

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

style

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

components.json

  1. {
  2.   "style": "default" | "new-york"
  3. }

预览代码

样式：纽约

创建项目

一键部署你的新项目。

名称

框架选择 Next.js SvelteKit Astro Nuxt.js

取消 部署

tailwind

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

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

tailwind.config

tailwind.config.js 文件的位置路径。

components.json

  1. {
  2.   "tailwind": {
  3.     "config": "tailwind.config.js" | "tailwind.config.ts"
  4.   }
  5. }

tailwind.css

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

components.json

  1. {
  2.   "tailwind": {
  3.     "css": "styles/global.css"
  4.   }
  5. }

tailwind.baseColor

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

components.json

  1. {
  2.   "tailwind": {
  3.     "baseColor": "gray" | "neutral" | "slate" | "stone" | "zinc"
  4.   }
  5. }

tailwind.cssVariables

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

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

components.json

  1. {
  2.   "tailwind": {
  3.     "cssVariables": `true` | `false`
  4.   }
  5. }

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

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

tailwind.prefix

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

components.json

  1. {
  2.   "tailwind": {
  3.     "prefix": "tw-"
  4.   }
  5. }

rsc

是否启用 React 服务器组件支持。

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

components.json

  1. {
  2.   "rsc": `true` | `false`
  3. }

tsx

选择使用 TypeScript 或 JavaScript 组件。

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

components.json

  1. {
  2.   "tsx": `true` | `false`
  3. }

aliases

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

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

重要： 如果你使用 src 目录，请确保它已包含在 tsconfig.json 或 jsconfig.json 文件的 paths 中。

aliases.utils

用于你的工具函数的导入别名。

components.json

  1. {
  2.   "aliases": {
  3.     "utils": "@/lib/utils"
  4.   }
  5. }

aliases.components

用于你的组件的导入别名。

components.json

  1. {
  2.   "aliases": {
  3.     "components": "@/components"
  4.   }
  5. }

aliases.ui

用于 ui 组件的导入别名。

CLI 会使用 aliases.ui 值来确定 ui 组件的位置。使用此配置可以自定义 ui 组件的安装目录。

components.json

  1. {
  2.   "aliases": {
  3.     "ui": "@/app/ui"
  4.   }
  5. }

aliases.lib

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

components.json

  1. {
  2.   "aliases": {
  3.     "lib": "@/lib"
  4.   }
  5. }

aliases.hooks

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

components.json

  1. {
  2.   "aliases": {
  3.     "hooks": "@/hooks"
  4.   }
  5. }