Electron Hotplate

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.

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

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

Electron-React-Boilerplate Docs

See the Electron React Boilerplate docs and guides here

Tutorials

Creating multiple windows: electron-react-boilerplate/electron-react-boilerplate#623 (comment)

qdcxj/electron-hotplate