Skip to content
Projects

shipkit-io/electron-bones

View on GitHub

shipkit-io/electron-bones has 45 GitHub stars and 13 forks. GitHot measured 0 stars in 24 hours. Last checked 2026-11-15 01:55 UTC. Last push 2026-11-13.

How these counts are measured

45 stars13 Forks

What you can do

  • 🚀 React for the UI
  • 🖥️ Electron for cross-platform desktop app development
  • 📘 TypeScript for type-safe code
  • 🎨 TailwindCSS for styling

Measured star growth

in 24h
0
in 7 days
Collecting history
in 15 days
Collecting history
in 1 month
Collecting history

Net star changes over overlapping periods, not daily totals. Missing measurements are left blank. Stars measure attention, not software quality.

About

An opinionated boilerplate for Electron featuring Shadcn/ui, Typescript, and Tailwind. Based on Electron React Boilerplate.

Web & Apps

README.md

Original

Electron Bones 🔥

A batteries-included Electron boilerplate with React, TypeScript, and more. Based on the Electron React Boilerplate, this project includes a demo app showcasing basic functionality and inter-process communication between the main and renderer processes.

Build Status Github Tag

✨ Features

  • 🚀 React for the UI
  • 🖥️ Electron for cross-platform desktop app development
  • 📘 TypeScript for type-safe code
  • 🎨 TailwindCSS for styling
  • 🔌 Inter-process communication (IPC) between main and renderer processes
  • 🌍 Global context for state management
  • 🖼️ Multi-window support (main window and child window)
  • 🔔 App and System-wide Notifications
  • 🔄 Auto Updater
  • 💾 Built-in Store with electron-store
  • 🖱️ Context Menu
  • 🌙 Dark Mode
  • ❌ Error Handler
  • ⌨️ Keyboard Shortcut Manager
  • 📝 Logging
  • 🀱 Menu Bar for macOS, Windows, and Linux
  • 📂 Multi-Window
  • 🖥️ System Tray
  • 🎨 UI components from Shadcn

🚀 Getting Started

  1. Clone this repository

    git clone https://github.com/lacymorrow/electron-hotplate.git

  2. Go into the repository

    cd electron-hotplate

  3. Install dependencies

    npm install

  4. Start the development server

    npm run start

📁 Project Structure

  • src/main: Contains the main process code
  • src/renderer: Contains the renderer process code (React components)
  • src/config: Contains configuration files
  • src/utils: Contains utility functions

📜 Available Scripts

  • npm run start: Start the app in development mode
  • npm run package: Build the app for production
  • npm run lint: Run the linter
  • npm run test: Run tests

Production

Auto Update

After publishing your first version, you can enable auto-update by uncommenting the update function contents in src/main/auto-update.ts.

Built With

Development

Tailwind CSS

We use Tailwind CSS for styling. See the Tailwind CSS docs for more information.

Some Tailwind plugins have been added for convenience:

  • Tailwind Animate - tailwindcss-animate
  • Tailwind Container Queries - @tailwindcss/container-queries
  • Child selectors to target immediate children like child:w-xl
  • Don't forget group selectors too: group (Parent) group-hover:bg-gray-100 (Child)

Shadcn

Shadcn is a UI component library for React. See the Shadcn docs for more information. Use npx shadcn@latest add button ... to add a component to your project.

Current installation command (to update all ui components):

npx shadcn@latest add button checkbox dropdown-menu form input menubar radio-group scroll-area select separator sonner switch textarea

To list components with updates: npx shadcn@latest diff

Based on the Electron React Boilerplate, this boilerplate adds UI components from Shadcn, styling with Tailwind CSS, persistance with electron-store, and a structured React context that promotes a data flow from the top down: Main process -> Renderer process.


Build Status Github Tag

Features

  • 💬 App and System-wide Notifications
  • 🏃‍♂️ Auto Updater
  • 📦 Built-in Store
  • 🖱️ Context Menu
  • 🌙 Dark Mode
  • ❌ Error Handler
  • ⌨️ Keyboard Shortcut Manager
  • 📝 Logging
  • 🀱 Menu Bar for macOS, Windows, and Linux
  • 📂 Multi-Window
  • 🖥️ System Tray

Getting Started


# Clone this repository
git clone https://github.com/lacymorrow/electron-hotplate.git

# Go into the repository
cd electron-hotplate

# Install dependencies
yarn

# Run the app
yarn start

Production

Auto Update

After publishing your first version, you can enable auto-update by uncommenting the update function contents in src/main/auto-update.ts.

BuiltWith

Development

Tailwind CSS

We use Tailwind CSS for styling. See the Tailwind CSS docs for more information.

Some Tailwind plugins have been added for convenience:

  • Tailwind Animate - tailwindcss-animate
  • Tailwind Container Queries - @tailwindcss/container-queries
  • Child selectors to target immediate children like child:w-xl
  • Don't forget group selectors too: group (Parent) group-hover:bg-gray-100 (Child)

Shadcn

Shadcn is a UI component library for React. See the Shadcn docs for more information. Use npx shadcn-ui@latest add accordion ... to add a component to your project.

Current installation command (to update all ui components):

npx shadcn-ui@latest add button checkbox dropdown-menu form input menubar radio-group scroll-area select separator sonner switch textarea

To list components with updates: npx shadcn-ui@latest diff

Build for production

npm run package

Important Notes

  • The src/main/auto-update.ts file is where the auto-updater is configured. Uncomment the update function to enable auto-update after publishing your first version.
  • The app icon will ALWAYS be the default Electron icon in development. You will need to build the app with npm run package to get a new icon.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Electron-React-Boilerplate

See the Electron React Boilerplate docs and guides here

Tutorials

📄 License

This project is licensed under the CC-BY-NC-SA-4.0 License.