Electron React App screenshot

Electron React App

Author Avatar Theme by Guasam
Updated: 27 Sep 2025
724 Stars

Modern desktop application starter kit with Electron, React, TypeScript, TailwindCSS & Shadcn/UI to build cross-platform apps.

Categories

Overview

The Electron React Webpack Typescript (Custom Titlebar) is a prebuilt project that allows users to create desktop applications using Electron, React, Webpack, and Typescript. It provides features such as hot-reload, custom import aliases, and executable builds for distribution.

Features

  • Electron
  • TypeScript
  • React
  • SASS/SCSS Loader
  • CSS Loader
  • Image Loader
  • Font Loader
  • ESLint
  • Electron Forge
  • Custom Window Frame
  • Custom Window Titlebar
  • Custom Window Menubar
  • Webpack & Configuration
  • Aliases for Project Paths
  • Native (node) Modules Support
  • React Fast Refresh + Webpack HMR
  • Dark Mode + Light Mode (Theme)
  • Package Bundling (Distribution / Release)

Installation

To install the Electron React Webpack Typescript (Custom Titlebar) project, follow these steps:

  1. Install the required dependencies using either pnpm, yarn, or npm.
  2. Start the Electron application for development.
  3. Lint the application source code using ESLint.
  4. Customize and package the Electron app with OS-specific bundles.
  5. Create platform-specific distributables (DMG, EXE, Flatpak, etc.).
  6. Publish the artifacts generated for distribution or use.

Summary

The Electron React Webpack Typescript (Custom Titlebar) project is a prebuilt solution for creating desktop applications using Electron, React, Webpack, and Typescript. It offers a range of features including hot-reload, custom import aliases, and executable builds for distribution. The installation process is straightforward, and users can easily customize and package their applications for different platforms.