How to add ShadCN to an electron-vite project.

#electron #vite #tailwindcss #shadcn

Currently, it's a bit tricky to add shadcn components to an electron-vite project, so I thought of creating a small write-up for anyone who gets stuck.

Add Tailwind

First of all we need to add TailwindCSS to support shadcn as the components are built on top on TailwindCSS.
At the time of writing this, TailwindCSS has released v4 and shadcn documentation tells you how to add TailwindCSS v3. But we will add the newer v4.
Run npm install tailwindcss @tailwindcss/vite
Add tailwindcss plugin to your electron.vite.config.ts file.

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()]
  }
})

Add this line @import "tailwindcss"; to the top of your /src/renderer/src/assets/main.css file.
Use a TailwindCSS classname somewhere in your project to verify if it works.
Run with npm run dev and verify.

Add ShadCN

Since we've already added TailwindCSS, we will directly jump to the point where we initialize ShadCN.
But first let's add these compiler options to tsconfig.node.json file.

{
  //...
  "compilerOptions": {
    "composite": true,
    "types": ["electron-vite/node"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/renderer/src/*"]
    },
    "moduleResolution": "bundler"
  }
}

Now initialize ShadCN by running - npx shadcn@latest init
This will throw an error saying a supported framework is not found. So create a vite.config.ts file and paste the contents of electron.vite.config.ts inside it.
Add compiler options to tsconfig.json as well -

{
  //...
  "compilerOptions": {
    "composite": true,
    "types": ["electron-vite/node"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/renderer/src/*"]
    }
  }
}

Note: Move the lib/utils.ts directory to src/renderer/src/lib/utils.ts.
Run npx shadcn@latest init again and follow the flow, you should be able to get shadcn working now.

Fin.