How to add ShadCN to an electron-vite project.

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.