目前为止，Shadcn UI和TanStack Router在开发者中都迅速流行起来。想写这篇文章来记录如何在React项目中集成。

将ShadcnUI和anStack Router集成到React

\

Shadcn UI

Shadcn UI是一个现代、高度可定制对开发人员友好的组件库，在React应用程序中构建用户界面。
具有基于Radix UI原语构建的预先设计的访问组件，利用Tailwind CSS的强大功能和灵活性进行样式设计。

TanStack 路由器
TanStack Router是功能强大、类型安全、与框架无关的路由解决方案，专为 React 和其他框架而设计。作为TanStack的一部分，它提供了内置数据提取、过时重新验证缓存和对搜索参数API的一流支持等高级功能。

React安装设置Shadcn UI

创建新的React项目

pnpm create vite@latest
# or
npm create vite@latest
# or
yarn create vite

首先，指定项目名称。

选择 React 作为框架。

选择 TypeScript 

添加Tailwind配置
Shadcn UI组件使用Tailwind CSS进行样式设置

pnpm add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

@tailwind base;
@tailwind components;
@tailwind utilities;

修改所有模板文件的路径tailwind.config.js。

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

配置路径别名
配置Tailwind CSS后，在使用 Vite 创建的 React.js 项目中配置路径别名，更新三个文件：tsconfig.json、tsconfig.app.json和vite.config.ts。

更新tsconfig.json
tsconfig.json文件配置替换内容：

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

更新tsconfig.app.json

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}

配置vite.config.ts路径

npm i -D @types/node
# or
yarn add -D @types/node
# or
pnpm add -D @types/node

添加Shadcn/UI组件，使用按钮组件来构建一个计数器。计数器有三个按钮：
一个用于增加，
一个用于减少，
一个用于重置计数。

pnpm dlx shadcn@latest add button
# or
npx shadcn@latest add button

src/App.tsx代码：

import { useState } from "react";
import "./App.css";
import { Button } from "./components/ui/button";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      

Vite + React

    
  );
}

export default App;