Tauri React Starter

A modern, lightweight starter template for building cross-platform desktop applications with Tauri, React, TypeScript, and shadcn/ui.

✨ Features

• 🚀 Tauri 2 - Build smaller, faster, and more secure desktop applications
• ⚛️ React 19 - Latest React with new compiler and improved performance
• 🔷 TypeScript - Type safety out of the box
• 🎨 Tailwind CSS v4 - Utility-first CSS framework
• 🧩 shadcn/ui - Beautiful, accessible component library
• 🌗 Dark Mode - Built-in theme switcher with localStorage persistence
• ⚡ Vite - Lightning-fast HMR and build tool
• 🦀 Rust - Performance and safety for the backend
• 📦 pnpm - Fast, disk space efficient package manager
• 🔍 ESLint - Code quality with antfu's config
• 🎯 Format on Save - Configured for both React and Rust
• 📝 VS Code Ready - Pre-configured settings and extension recommendations
• 🤖 GitHub Actions - CI/CD with multi-platform builds (Windows, macOS, Linux)

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18 or higher)
• pnpm (v8 or higher)
• Rust (latest stable)
• System Dependencies for Tauri:
  • Windows: Microsoft C++ Build Tools, WebView2
  • macOS: Xcode Command Line Tools
  • Linux: See Tauri prerequisites

🚀 Quick Start

1. Clone the repository

   git clone <your-repo-url>
   cd tauri-react-starter

2. Install dependencies

   pnpm install

3. Start development

   pnpm tauri dev

📜 Available Scripts

Development

pnpm dev          # Start Vite dev server
pnpm tauri dev    # Start Tauri app in development mode

Building

pnpm build        # Build frontend (React app)
pnpm tauri build  # Build Tauri app for production

Type Checking & Linting

pnpm typecheck         # TypeScript type checking
pnpm lint              # Check ESLint issues
pnpm lint:fix          # Auto-fix ESLint issues
pnpm lint:rust         # Run Clippy on Rust code

Formatting

pnpm format            # Format both React and Rust code
pnpm format:rust       # Format Rust code only
pnpm format:check      # Check formatting without fixing

🏗️ Project Structure

tauri-react-starter/
├── src/                      # React frontend
│   ├── components/           # React components
│   │   ├── ui/              # shadcn/ui components
│   │   ├── theme-provider.tsx
│   │   └── theme-toggle.tsx
│   ├── lib/                 # Utility functions
│   ├── App.tsx              # Main app component
│   ├── App.css              # Global styles + Tailwind
│   └── main.tsx             # React entry point
├── src-tauri/               # Tauri backend (Rust)
│   ├── src/
│   │   ├── lib.rs           # Main Tauri logic
│   │   └── main.rs          # Entry point
│   ├── Cargo.toml           # Rust dependencies
│   ├── tauri.conf.json      # Tauri configuration
│   └── rustfmt.toml         # Rust formatting config
├── .vscode/                 # VS Code configuration
│   ├── settings.json        # Editor settings
│   └── extensions.json      # Recommended extensions
├── eslint.config.mjs        # ESLint configuration
├── tsconfig.json            # TypeScript configuration
├── vite.config.ts           # Vite configuration
└── package.json             # Node dependencies & scripts

🎨 Tech Stack

Frontend

• React 19 - UI library
• TypeScript - Type safety
• Tailwind CSS v4 - Styling
• shadcn/ui - Component library
• Vite - Build tool
• Lucide React - Icon library

Backend

• Tauri 2 - Desktop framework
• Rust - System programming language

Development Tools

• ESLint (antfu config) - Linting
• rustfmt - Rust formatting
• Clippy - Rust linting
• pnpm - Package management

🔧 Configuration

Theme Customization

Edit src/App.css to customize your theme colors. The starter uses Tailwind v4 with CSS variables for theming.

Tauri Configuration

Edit src-tauri/tauri.conf.json to configure:

• App name and version
• Window size and behavior
• Build targets
• Security settings

VS Code

The project includes pre-configured settings for:

• Format on save (React & Rust)
• ESLint integration
• Tailwind CSS IntelliSense
• Rust Analyzer

📦 Building for Production

Build standalone installers for your platform:

pnpm tauri build

Outputs:

• Windows: .exe, .msi, and NSIS installer in src-tauri/target/release/bundle/
• macOS: .dmg and .app in src-tauri/target/release/bundle/
• Linux: .deb, .AppImage in src-tauri/target/release/bundle/

Note: You can only build for your current platform. For multi-platform builds, use GitHub Actions (see below).

🤖 GitHub Actions CI/CD

This starter includes professional CI/CD workflows out of the box:

✅ Continuous Integration (ci.yml)

Runs on every push and PR:

• TypeScript type checking
• ESLint linting (React + Rust)
• Format verification
• Build verification

Duration: ~2-3 minutes

🚀 Automated Releases (release.yml)

Creates multi-platform installers when you push a version tag:

git tag v1.0.0
git push origin v1.0.0

Builds for:

• Windows (x64) - .exe, .msi, NSIS installer
• macOS (Intel) - .dmg, .app
• macOS (Apple Silicon) - .dmg, .app
• Linux (x64) - .deb, .AppImage

All installers are automatically uploaded to a GitHub Release.

Duration: ~10-15 minutes

See .github/workflows/README.md for detailed documentation.

🛠️ Recommended IDE Setup

• Visual Studio Code
• Extensions (auto-suggested when you open the project):
  • rust-analyzer
  • Even Better TOML
  • ESLint
  • Tailwind CSS IntelliSense

📄 License

MIT

👤 Author

eggfriedrice

---

Built with ❤️ using Tauri, React, and shadcn/ui