Electron Vite ShadCN Starter

⚡️ Electron + Vite + React + TypeScript + Tailwind CSS + shadcn/ui

A minimal Electron starter template with shadcn/ui pre-configured. Add UI components just like web projects.

Features

• ⚡️ Electron Vite - Fast HMR for Electron apps
• 🎨 shadcn/ui - Pre-configured and ready to use
• 📘 TypeScript - Full type safety
• 🌈 Tailwind CSS 4 - Modern styling
• ⚛️ React 19 - Latest React

Quick Start

# Clone the repo
git clone https://github.com/yourusername/electron-vite-shadcn-starter
cd electron-vite-shadcn-starter

# Install dependencies
pnpm install

# Start development
pnpm dev

Adding shadcn/ui Components

Works exactly like web projects:

# Add any component
npx shadcn@latest add button
npx shadcn@latest add dialog
npx shadcn@latest add card

# Use it in your code
import { Button } from "@/components/ui/button"

Project Structure

├── src/
│   ├── main/              # Electron main process
│   ├── preload/           # Preload scripts
│   └── renderer/src/      # React app (shadcn/ui components here)
│       ├── components/
│       ├── lib/
│       └── App.tsx
├── electron.vite.config.ts
├── vite.config.ts         # For shadcn CLI
└── components.json        # shadcn/ui config

Build

# Build for macOS
pnpm build:mac

# Build for Windows
pnpm build:win

# Build for Linux
pnpm build:linux

How it Works

This template solves the shadcn/ui + Electron integration:

1. Dual config setup: electron.vite.config.ts for Electron, vite.config.ts for shadcn CLI
2. Correct paths: All imports use @/ pointing to src/renderer/src/
3. TypeScript configured: Both tsconfig.json and tsconfig.web.json setup
4. Tailwind CSS 4: Using @import "tailwindcss" syntax

References

• How to add ShadCN to electron-vite
• electron-vite official template

Scripts

pnpm dev              # Start dev server
pnpm build            # Build the app
pnpm build:mac        # Build for macOS
pnpm build:win        # Build for Windows
pnpm build:linux      # Build for Linux
pnpm lint             # Lint code
pnpm format           # Format code

Tech Stack

• Electron - Desktop app framework
• Vite - Build tool
• React - UI library
• TypeScript - Type safety
• Tailwind CSS - Styling
• shadcn/ui - UI components

Recommended IDE Setup

• VSCode + ESLint + Prettier

License

MIT