我是如何在electron里安装shadcn-ui框架的
我是如何在electron里安装shadcn ui框架的
Electron集成ShadCN UI指南
0. 记录发帖
xxxxxxxxxx —— 2025年9月17日 8:46
1. 安装
shadcn网站：
我的electron项目基于@quick-start/electron@latest生成，因此以下内容也基于这个项目。
首先来到shadcn的安装教程：
，点击Manual
遵照它的步骤，先安装Tailwind ：
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.jsontsconfig.web.jsonelectron.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'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！