Electron Vite React Shadcn Starter

A modern and beautiful Electron starter template supercharged with Vite, React, TypeScript, Tailwind CSS, Shadcn UI, Framer Motion, and theme support.

✨ Features

• 🚀 Blazing Fast: Built on Vite for lightning-fast HMR and development experience
• 🎨 Beautiful UI: Pre-configured with Shadcn UI and Tailwind CSS
• 🌓 Theme Support: Dark/Light mode with next-themes
• 🔥 Hot Reload: Instant feedback with HMR for both main and renderer processes
• 📦 Production Ready: Optimized build setup with electron-builder
• 🛡️ Type Safe: Written in TypeScript for better developer experience
• 🎭 Animations: Smooth animations with Framer Motion
• 🧩 Component Library: Extensive collection of pre-built components
• 🔧 Developer Tools: ESLint, Prettier, and TypeScript configured

🚀 Quick Start

Clone the repository:

git clone https://github.com/7hourspg/electron-vite-react-shadcn-starter

Navigate to the directory

cd electron-vite-react-shadcn-starter

Install dependencies

npm install

Start the development server

npm run dev

🛠️ Tech Stack

• Electron - Desktop application framework
• Vite - Next Generation Frontend Tooling
• React - UI library
• TypeScript - Type safety
• Tailwind CSS - Utility-first CSS framework
• Shadcn UI - Beautiful and accessible components
• Framer Motion - Animation library
• next-themes - Theme management

🎯 Development Features

• 🔄 Hot Module Replacement (HMR)
• 🎨 Tailwind CSS with CSS variables for theming
• 🌓 Dark mode support with next-themes
• 🎭 Framer Motion animations
• 🧩 Pre-configured Shadcn UI components
• 📝 ESLint + Prettier for code formatting
• 🛡️ TypeScript for type safety
• 🔧 Debugger configurations for VS Code

💡 Tips

• Press Ctrl/Cmd + Shift + I to open DevTools
• Use the theme toggle in the top right corner
• Check out the Features, Quick Start, and Resources tabs
• Explore pre-built components in the UI section

📄 License

MIT License © 2024 7hourspg

🤝 Contributing

Contributions, issues and feature requests are welcome!

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

🙏 Credits

• electron-vite
• shadcn/ui
• Tailwind CSS
• Framer Motion

Made with ❤️ by 7hourspg