如何将shadcn与react使用（javaScript，无打字稿）

使用vite和tailwind css 3.4.1构建react项目并集成shadcn ui组件

本文档指导您如何在不使用TypeScript的情况下，使用Vite构建一个React项目，并集成shadcn UI组件库。我们将使用Tailwind CSS 3.4.1版本，因为它与shadcn当前版本兼容性更好。

第一步：项目创建和Tailwind CSS安装

1. 使用Vite创建一个新的React项目：

   <code class="bash">npm create vite@latest my-react-app -- --template react
   cd my-react-app</code>

2. 安装Tailwind CSS 3.4.1及其依赖：

   立即学习“Java免费学习笔记（深入）”；

   <code class="bash">npm install -D tailwindcss@3.4.1 postcss autoprefixer</code>

3. 初始化Tailwind CSS配置：

   <code class="bash">npx tailwindcss init -p</code>

4. 在 src/index.css 文件顶部添加Tailwind CSS指令：

   <code class="css">@tailwind base;
   @tailwind components;
   @tailwind utilities;</code>

5. 编辑 tailwind.config.js 文件，确保其内容如下：

   <code class="javascript">/** @type {import('tailwindcss').Config} */
   module.exports = {
     content: ["./index.html", "./src/**/*.{js,jsx}"],
     theme: {
       extend: {},
     },
     plugins: [],
   }</code>

6. 创建 jsconfig.json 文件，并添加以下内容，用于路径别名：

   <code class="json">{
     "compilerOptions": {
       "baseUrl": ".",
       "paths": {
         "@/*": ["./src/*"]
       }
     }
   }</code>

第二步：安装和配置shadcn

1. 安装shadcn UI组件：

   

   歌者PPT

   歌者PPT，AI 写 PPT 永久免费

   下载

   <code class="bash">npx shadcn@latest init</code>

   (选择 "New York" 主题和 "zinc" 颜色方案，并选择 "Use --force" 选项强制覆盖文件。)

2. 编辑 vite.config.js 文件，添加路径别名，确保其内容如下：

   <code class="javascript">import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';
   import path from 'path';
   
   export default defineConfig({
     plugins: [react()],
     resolve: {
       alias: {
         '@': path.resolve(__dirname, './src'),
       },
     },
   });</code>

第三步：使用shadcn组件

1. 在 src/App.jsx 中导入并使用shadcn组件，例如 Button 组件：

   <code class="jsx">import './App.css';
   import { Button } from '@shadcn/ui';
   
   function App() {
     return (
       <Button>Click Me</Button>
     );
   }
   
   export default App;</code>

New York主题和Zinc颜色方案

shadcn的New York主题提供了一种现代且美观的UI风格，而Zinc颜色方案则提供了一组易于阅读且视觉上令人愉悦的颜色。两者结合使用，可以快速构建出高质量的用户界面。

预览:

通过以上步骤，您已经成功地在React项目中集成了shadcn UI组件库，并使用了Tailwind CSS进行样式控制。 记住在安装组件时选择 Use --force 选项来覆盖可能存在的冲突。