components.json 文件用于存储项目的配置信息。

我们通过该文件了解项目的设置方式，并生成针对项目定制的组件。

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

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

pnpm dlx shadcn-vue@latest init

更多信息请参阅 CLI 章节。

$schema

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

components.json

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

对于 shadcn-vue@radix 标签，Schema 位于此处。详情请参阅更新日志。

style

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

components.json

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

Create project

Deploy your new project in one-click.

Name

Framework

Tailwind

帮助 CLI 理解项目中 Tailwind CSS 设置方式的配置。

关于如何设置 Tailwind CSS，请参阅安装章节。

tailwind.config

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

components.json

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

tailwind.css

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

components.json

{
  "tailwind": {
    "css": "src/assets/index.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-"
  }
}

aliases

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

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

如果在 tsconfig.json 中未找到 paths，则回退到 tsconfig.app.json

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

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 函数（如 cn 或 valueUpdater）的导入别名。

components.json

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

aliases.composables

composables（如 useMediaQuery 或 useToast）的导入别名。

components.json

{
  "aliases": {
    "composables": "@/composables"
  }
}