Electron + Vite + Shadcn/ui + Tailwind v4 Template

Custom Electron template created based on LuanRoger's template

Core

• Electron 34
• Vite 6

Dev

• TypeScript 5.7
• Prettier
• ESLint 9
• Zod
• React Query (TanStack)

UI

• React 19
• Tailwind 4
• Shadcn UI
• Geist as default font
• i18next
• TanStack Router
• Lucide

Test

• Vitest
• Playwright
• React Testing Library

Packing and distribution

• Electron Forge

CI/CD

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

Directory structure

.
└── ./src/
    ├── ./src/assets/
    │   └── ./src/assets/fonts/
    ├── ./src/components/
    │   ├── ./src/components/template
    │   └── ./src/components/ui/
    ├── ./src/helpers/
    │   └── ./src/helpers/ipc/
    ├── ./src/layout/
    ├── ./src/lib/
    ├── ./src/pages/
    ├── ./src/style/
    └── ./src/tests/

• src/: Main directory
  • assets/: Store assets like images, fonts, etc.
  • components/: Store UI components
    • template/: Store the all not important components used by the template. It doesn't include the WindowRegion or the theme toggler, if you want to start an empty project, you can safely delete this directory.
    • ui/: Store Shadcn UI components (this is the default direcotry used by Shadcn UI)
  • helpers/: Store IPC related functions to be called in the renderer process
    • ipc/: Directory to store IPC context and listener functions
      • Some implementations are already done, like theme and window for the custom title bar
  • layout/: Directory to store layout components
  • lib/: Store libraries and other utilities
  • pages/: Store app's pages
  • style/: Store global styles
  • tests/: Store tests (from Vitest and Playwright)

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 dev