Electron + Vite + React + TypeScript Boilerplate

A modern, production-ready desktop application boilerplate combining the power of Electron with the speed of Vite and the elegance of React.

Features • Quick Start • Documentation • Contributing

✨ Features

• ⚡️ Lightning Fast HMR - Powered by Vite for instant hot module replacement
• 🎨 Modern UI Stack - Pre-configured with shadcn/ui components and Tailwind CSS v4
• 🔒 Type Safety - Full TypeScript support throughout the project
• 🧭 Advanced Routing - TanStack Router for type-safe navigation
• 🌓 Dark Mode Ready - Built-in theme system with smooth transitions
• 📦 Optimized Build - Efficient production builds with code splitting
• 🛠️ Developer Experience - ESLint, Prettier, and hot reload out of the box
• 🔌 Easy to Extend - Modular architecture for rapid development

🚀 Quick Start

Prerequisites

• Node.js (v20 or higher)
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/ezoltech/electronjs-vitets-shadcn-tanstack-boilerplate.git
cd electron-vite-react-boilerplate

# Install dependencies
npm install

# Start development server
npm run dev

The application will launch automatically with hot reload enabled.

📦 Tech Stack

Technology	Purpose
Electron	Cross-platform desktop framework
Vite	Next-generation frontend tooling
React 20+	UI library with modern features
TypeScript	Type-safe JavaScript
TanStack Router	Type-safe routing solution
shadcn/ui	Beautifully designed components
Tailwind CSS v4	Utility-first CSS framework
Radix UI	Accessible component primitives
Lucide Icons	Modern icon set

🏗️ Project Structure

electron-vite-react-boilerplate/
├── electron/              # Electron main process
│   ├── main.ts           # Main process entry
│   └── preload.ts        # Preload scripts
├── src/                  # React application
│   ├── app/              # App components
│   ├── components/       # Reusable components
│   │   └── ui/          # shadcn/ui components
│   ├── lib/             # Utilities and helpers
│   ├── routes/          # TanStack Router routes
│   └── App.tsx          # Root component
├── public/              # Static assets
└── package.json         # Dependencies and scripts

🔧 Available Scripts

# Development
npm run dev              # Start dev server with hot reload
npm run dev:electron     # Start Electron in dev mode

# Building
npm run build            # Build for production
npm run build:win        # Build for Windows
npm run build:mac        # Build for macOS
npm run build:linux      # Build for Linux

# Code Quality
npm run lint             # Run ESLint
npm run format           # Format with Prettier
npm run type-check       # Run TypeScript compiler check

🎨 Customization

Adding New Routes

Using TanStack Router, add new routes in the src/routes directory:

// src/routes/about.tsx
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/about")({
  component: AboutComponent,
});

function AboutComponent() {
  return <div>About Page</div>;
}

Styling with Tailwind

The project uses Tailwind CSS v4. Customize your theme in tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "#your-color",
      },
    },
  },
};

Adding shadcn/ui Components

Install new shadcn/ui components using the CLI:

npx shadcn@latest add button
npx shadcn@latest add card

📝 Configuration

Electron Builder

Configure build options in electron-builder.json5:

{
  appId: "com.yourcompany.yourapp",
  productName: "Your App Name",
  directories: {
    output: "dist",
  },
  // Add platform-specific configurations
}

Vite Configuration

Modify vite.config.ts for custom build behavior:

export default defineConfig({
  // Your custom configuration
});

🔐 Security

This boilerplate follows Electron security best practices:

• Context isolation enabled
• Node integration disabled in renderer
• Secure preload scripts
• Content Security Policy ready

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Electron - Build cross-platform desktop apps
• Vite - Next generation frontend tooling
• shadcn/ui - Beautiful UI components
• TanStack Router - Type-safe routing
• Tailwind CSS - Utility-first CSS

📮 Support

If you have any questions or need help, please:

• Open an issue
• Start a discussion
• Reach out on Twitter

---

Made with ❤️ by [Ezol Tech](https://github.com/ezoltech)

⭐️ Star this repo if you find it helpful!