二、ShadcnUI组件

ShadcnUI 并不是一个组件库，不通过 npm 分发，而是可重用组件的集合，可以将组件代码复制到自己的应用中使用，并根据自己的需求对其进行调整、自定义，代码是我们自己的。

ShadcnUI 是 React 生态的，支持多个框架下的使用，由于我们是在 Nextjs 分类下的文章，后续的内容也会基于 Nextjs ，其安装方式可以在官方文档上很方便的找到，按照步骤进行操作即可。

使用组件

虽然在前边我们说可以复制代码到自己的应用，但是实际开发中我们一般是使用命令行来实现这个过程的，比如:

# 添加 button 组件
npx shadcn-ui@latest add button

执行该命令之后，会在 /components/ui/ 目录下生成对应的组件文件，我们就可以拿来使用了。

import { Button } from "@/components/ui/button"
export default function Page() {
  return (
    <div>
      <Button>按钮</Button>
    </div>
  )
}

各种组件的应用查看文档即可

components.json

我们还是要说一下项目配置文件 components.json

比如我们当前项目根目录下会存在该文件：

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

我们看一下其中的一些字段：

• style - 组件样式，初始化后就不能修改了
• rsc - React Server Component支持
• tsx - tsx支持
• tailwind - tailwind css的一些配置
  • config - tailwind 的配置文件
  • css - 将tailwind 导入到项目的 css 文件的路径
  • baseColor - 用于生成组件的默认调色板，初始化后无法更改
  • cssVariables - 可以选择使用 css 变量 或者 tailwind css 实用程序类进行主题设置，初始化后无法更改
  • prefix - tailwind 实用程序类的前缀
• alias - 实用这里的别名值和路径，从而将你的组件等放到正确的位置