Shadcn Electron App

Streamline Electron Development with shadcn/ui and Vite Integration

shadcn-electron-app offers a structured approach for developers to integrate the modern shadcn/ui component library with an electron-vite project. This starter kit accelerates the initial setup process by providing pre-configured settings for Tailwind CSS, TypeScript path aliases, and essential UI styling. By following the outlined installation steps, developers can quickly establish a robust foundation for building visually appealing and performant cross-platform desktop applications, minimizing boilerplate and focusing on core application logic.

Features:

• Project Scaffolding with electron-vite: Initializes the project using the @quick-start/electron template for a solid Electron and Vite base.
• Core shadcn/ui Dependencies: Includes key libraries such as tailwindcss-animate, class-variance-authority, clsx, tailwind-merge, and lucide-react for UI functionality.
• Tailwind CSS Integration & Customization: Complete setup of Tailwind CSS, PostCSS, and Autoprefixer, along with a tailwind.config.js tailored for shadcn/ui's design system, including custom colors, border radius, and animations.
• Themeable CSS Variables: Pre-defined CSS custom properties in src/renderer/src/assets/base.css for light and dark themes, covering background, foreground, accents, and other UI elements.
• TypeScript Path Aliases: Configured baseUrl and paths in tsconfig.json and tsconfig.web.json (e.g., @/\*, @renderer/\*) for simplified and cleaner module imports.
• shadcn/ui components.json Configuration: A pre-filled components.json file defining the UI style (new-york), Tailwind CSS settings, base color, CSS variable usage, and aliases for components and utilities.
• Built-in Animation Support: Leverages the tailwindcss-animate plugin and provides keyframes for common UI animations, such as accordion effects.
• Lucide Icon Library Integration: Integrated lucide-react as the default icon set, configured via components.json for easy use within shadcn/ui components.
• Dark Mode Styling Support: Includes specific CSS variables within base.css to facilitate a dark theme variant.
• Optimized Renderer Imports: Establishes convenient path aliases like @renderer/\* for better organization within the Electron renderer process code.

Summary:

In essence, shadcn-electron-app provides a ready-to-use template that combines Electron, Vite, and shadcn/ui. It simplifies the complex setup of these technologies, offering pre-configured Tailwind CSS, TypeScript aliases, and theming capabilities. This enables developers to jumpstart the creation of modern, stylish, and efficient desktop applications with a focus on a productive development workflow and high-quality user interface design.