跳到内容
1.6k

Vite

在 Vite + React 项目中搭建 Neobrutalism。

1. 创建项目

用 Vite 创建一个新的 React + TypeScript 项目：

pnpm create vite@latest my-app -- --template react-ts
npm create vite@latest my-app -- --template react-ts
yarn create vite@latest my-app -- --template react-ts
bun create vite@latest my-app -- --template react-ts

2. 安装 Tailwind CSS

pnpm add tailwindcss @tailwindcss/vite
npm install tailwindcss @tailwindcss/vite
yarn add tailwindcss @tailwindcss/vite
bun add tailwindcss @tailwindcss/vite

将 src/index.css 中的全部内容替换为：

src/index.css
@import "tailwindcss";

3. 配置路径别名

在 tsconfig.json 和 tsconfig.app.json 中都添加 baseUrl 和 paths，以便解析 @/* 别名：

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

4. 更新 vite.config.ts

安装 Node 类型定义，然后让 Vite 学会解析别名：

pnpm add -D @types/node
npm install -D @types/node
yarn add -D @types/node
bun add -D @types/node
vite.config.ts
import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
 
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

5. 运行初始化

pnpm dlx shadcn@latest init
npx shadcn@latest init
yarn dlx shadcn@latest init
bunx --bun shadcn@latest init

6. 添加 Neobrutalism 注册表与主题

将 Neobrutalism 注册表添加到您的 components.json，然后搭建字体与主题：

components.json
{
  "registries": {
    "@neobrutalism": "https://neobrutalism.com/r/radix/{name}.json",
    "@neobrutalism-base": "https://neobrutalism.com/r/base/{name}.json"
  }
}

7. 添加组件

pnpm dlx shadcn@latest add @neobrutalism/button
npx shadcn@latest add @neobrutalism/button
yarn dlx shadcn@latest add @neobrutalism/button
bunx --bun shadcn@latest add @neobrutalism/button

大功告成！以同样的方式添加任意组件的 Radix 或 Base UI 变体即可。