0. 记录发帖

xxxxxxxxxx —— 2025年9月17日 8:46

1. 安装

shadcn网站：https://ui.shadcn.com/

我的electron项目基于@quick-start/electron@latest生成，因此以下内容也基于这个项目。

首先来到shadcn的安装教程：https://ui.shadcn.com/docs/installation，点击Manual

遵照它的步骤，先安装Tailwind ：https://tailwindcss.com/docs/installation/using-vite

实际上我们只照着前三个步骤就可以了

cd my-project(你的electron项目根目录)
npm install tailwindcss @tailwindcss/vite

首先安装好 tailwindcss npm包，接着我们来到 electron 项目根目录，找到electron.vite.config.ts （tailwindcss 官网里面说的是 vite.config.ts，但在我们 electron 项目这指的就是electron.vite.config.ts，所以不用担心）

我们改成以下内容:

import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite' //

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()]
  },
  preload: {
    plugins: [externalizeDepsPlugin()]
  },
  renderer: {
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer/src')
      }
    },
    plugins: [react(), tailwindcss()]
  }
})

ok了，到这里，tailwindcss 部分就完成了，我们继续回到shadcn的安装教程里

下一步我们安装shadcn依赖：

npm install class-variance-authority clsx tailwind-merge lucide-react tw-animate-css

现在我们去配置一下 tsconfig.json 。在我们 electron 项目里，实际要配置
tsconfig.json
tsconfig.web.json
electron.vite.config.ts 这三份文件：

首先是 tsconfig.json 文件：

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

注意了，虽然shadcn官网的教程指的是 ./*，但我们这里是./src/renderer/src/*。为什么呢？因为我们是 electron，我们的实际前端页面也就在/src/renderer/src/下面，所以必须要这样改。

接下来是 tsconfig.web.json 文件

{
  "extends": "@electron-toolkit/tsconfig/tsconfig.web.json",
  "include": [
    "src/renderer/src/env.d.ts",
    "src/renderer/src/**/*",
    "src/renderer/src/**/*.tsx",
    "src/preload/*.d.ts"
  ],
  "compilerOptions": {
    "composite": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@renderer/*": [
        "src/renderer/src/*"
      ],
      "@/*": ["./src/renderer/src/*"]
    }
  }
}

最后是 electron.vite.config.ts 文件：

import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()]
  },
  preload: {
    plugins: [externalizeDepsPlugin()]
  },
  renderer: {
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer/src'),
        "@": resolve(__dirname, "./src/renderer/src")
      }
    },
    plugins: [react(), tailwindcss()]
  }
})

ok，现在我们继续下一个步骤

虽然步骤上的style文件是src/styles/globals.css，但实际上我们可以自己灵活点改，下面是原先创建 electron 项目的时候自动生成的模板

我们直接删除所有模板代码（此时运行 npm run dev 就会是一片空白）

现在我们继续，把 shadcn的global.css 里的代码复制到 assets 目录的 main.css 里:


下一步我们添加一个helper文件：


下一步我们创建 components.json 文件（“components” 名字不能改）

这个文件我们在 electron 根目录下创建

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/renderer/src/assets/main.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}

注意，我修改了 tailwind->css 的内容，因为我们刚刚写的css代码的文件名是 assets/main.css ，而教程里指的是 styles/globals.css

OK，此时，我们就已经成功安装好shadcn了

2. 试试安装一个shadcn组件

此时运行 npm run dev，发现程序里什么都是空白的

现在我们随便添加一个shadcn组件来测试下，添加过程是这样的

我们来到shadcn的组件库去，找到你自己需要的组件。我这里举个例子，用Dialog



下面有一个组件安装命令，我们就是通过这个命令来安装组件的

npx shadcn@latest add dialog

可以看到，当我们用命令安装好组件之后，src目录下瞬间多出了个components目录，里面还有我们所创建的dialog组件的tsx文件

我们复制样例代码到App.tsx中，看看效果怎么样
（这个样例代码还用到了button input label，我们同理一个个用命令行安装即可）

import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function DialogDemo() {
  return (
    <Dialog>
      <form>
        <DialogTrigger asChild>
          <Button variant="outline">Open Dialog</Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>Edit profile</DialogTitle>
            <DialogDescription>
              Make changes to your profile here. Click save when you&apos;re
              done.
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-4">
            <div className="grid gap-3">
              <Label htmlFor="name-1">Name</Label>
              <Input id="name-1" name="name" defaultValue="Pedro Duarte" />
            </div>
            <div className="grid gap-3">
              <Label htmlFor="username-1">Username</Label>
              <Input id="username-1" name="username" defaultValue="@peduarte" />
            </div>
          </div>
          <DialogFooter>
            <DialogClose asChild>
              <Button variant="outline">Cancel</Button>
            </DialogClose>
            <Button type="submit">Save changes</Button>
          </DialogFooter>
        </DialogContent>
      </form>
    </Dialog>
  )
}


function App(): React.JSX.Element {

  return (
    <>
      <DialogDemo></DialogDemo>
    </>
  )
}

export default App

测试成功，这就是shadcn！