哈喽,我是老鱼，一名致力于在技术道路上的终身学习者、实践者、分享者！
使用 Radix UI 和 Tailwind CSS 构建的设计精美的组件，支持 Toast、Toggle、Toggle Group、Toolbar、 Navigation Menu。
项目地址：https://github.com/shadcn/ui
这不是一个组件库。它是可重复使用的组件的集合，您可以将其复制并粘贴到您的应用中。
不是组件库是什么意思？
我的意思是您不要将其安装为依赖项。它不可用或通过 npm 分发。
选择您需要的组件。将代码复制并粘贴到您的项目中，并根据您的需求进行自定义。代码是你的。
如何安装？
我们可以在Next.js、Vite、Remix、Laravel等中安装依赖和构建应用。
创建项目
首先使用以下命令创建一个新的 React 项目：vite
npm create vite@latest复制
添加 Tailwind 及其配置
安装及其对等依赖项，然后生成 和 文件：tailwindcsstailwind.config.jspostcss.config.js
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p复制
编辑 tsconfig.json 文件
将以下代码添加到文件中以解析路径：tsconfig.json
{ "compilerOptions": { // ... "baseUrl": ".", "paths": { "@/*": [ "./src/*" ] } // ... }}复制
更新 vite.config.ts
将以下代码添加到 vite.config.ts，以便应用可以无错误地解析路径
代码语言：javascript复制# (so you can import "path" without error)npm i -D @types/node复制
代码语言：javascript复制import path from "path"import react from "@vitejs/plugin-react"import { defineConfig } from "vite" export default defineConfig({ plugins: [react()], resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, },})复制
运行 CLI
运行 init 命令以设置项目：shadcn-ui
npx shadcn-ui@latest init复制
配置 components.json
系统将询问您几个要配置的问题：components.json
Would you like to use TypeScript (recommended)? no / yesWhich style would you like to use? › DefaultWhich color would you like to use as base color? › SlateWhere is your global CSS file? › › src/index.cssDo you want to use CSS variables for colors? › no / yesWhere is your tailwind.config.js located? › tailwind.config.jsConfigure the import alias for components: › @/componentsConfigure the import alias for utils: › @/lib/utilsAre you using React Server Components? › no / yes (no)复制
就是这样
现在，您可以开始向项目添加组件。
代码语言：javascript复制npx shadcn-ui@latest add button复制
上面的命令会将组件添加到您的项目中。然后，您可以像这样导入它：Button
import { Button } from "@/components/ui/button" export default function Home() { return ( <div> <Button>Click me</Button> </div> )}End
