electron-shadcn

Electron in all its glory. Everything you will need to develop your beautiful desktop application.

Libs and tools

To develop a Electron app, you probably will need some UI, test, formatter, style or other kind of library or framework, so let me install and configure some of them to you.

Core 🏍️

• Electron 39
• Vite 7

DX 🛠️

• TypeScript 5.9
• oRPC
• Prettier
• ESLint 9
• Zod 4
• React Query (TanStack)

UI 🎨

• React 19.2
• Tailwind 4
• Shadcn UI
• Geist as default font
• i18next
• TanStack Router (with file based routing)
• Lucide

Test 🧪

• Vitest
• Playwright
• React Testing Library

Packing and distribution 📦

• Electron Forge

CI/CD 🚀

• Pre-configured GitHub Actions workflow, for test with Playwright

Project preferences 🎯

• Use Context isolation
• React Compiler is enabled by default.
• titleBarStyle: hidden (Using custom title bar)
• Geist as default font
• Some default styles was applied, check the styles directory
• React DevTools are installed by default

How to use

1. Clone this repository

git clone https://github.com/LuanRoger/electron-shadcn.git

Or use it as a template on GitHub

2. Install dependencies

npm install

3. Run the app

npm run start

Now you can go directly to /src/routes/index.tsx and modify the app as you want.

You can also delete the /src/routes/second.tsx file if you don't want a second page.

Auto update

Warning

This feature only work in open-source repositories in GitHub, if you need to use in a private repository, you need to setup a custom update server. Check the Updating Applications section in the Electron documentation for more details.

The auto update uses GitHub Releases as source for the updates. The publish script will automatically create a new release with the version specified in your package.json file. You can run locally the publish script to create a new release, but you need to set the GITHUB_TOKEN environment variable with a GitHub Personal Access Token that has permission to create releases in your repository.

You can also use the GitHub Actions workflow to automatically create a new release when you push a new tag to the repository. The workflow need to be triggered manually, but you can modify to fit your needs. Also, the release is created as draft by default, so you can review and set a proper description before publish.

Check the .github/workflows/publish.yml file for more details.

When you open the app, it will check for updates automatically. If an update is available, it will download and install the update, after that, it will restart the app to apply the update. This ensure that your users always have the latest version of your app.

The auto update is implemented using update-electron-app to check the updates and apply them. For the publishing, it is using the Electron Forge's GitHub publisher.

Documentation

Check out the full documentation here.

Used by

• yaste - yaste (Yet another super ₛᵢₘₚₗₑ text editor) is a text editor, that can be used as an alternative to the native text editor of your SO, maybe.
• eletric-drizzle - shadcn-ui and Drizzle ORM with Electron.
• Wordle Game - A Wordle game which features interactive gameplay, cross-platform compatibility, and integration with a custom Wordle API for word validation and letter correctness.
• Mehr 🌟 - A modern, elegant local AI chatbot application using Electron, React, shadcn/ui, and Ollama.

Does you've used this template in your project? Add it here and open a PR.

License

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