Tauri React Template

中文文档

A modern, production-ready template for building cross-platform desktop applications with Tauri, React, and a carefully curated set of tools and libraries.

✨ Features

• 🚀 Tauri 2.0 - Build smaller, faster, and more secure desktop applications
• ⚛️ React 18 - Modern React with hooks and concurrent features
• ⚡ Vite - Lightning fast build tool and development server
• 🎨 Shadcn/ui - Beautiful and accessible UI components
• 🐻 Zustand - Simple and scalable state management
• 💾 Tauri Store - Persistent storage with Zustand integration
• 🎯 TailwindCSS 4 - Utility-first CSS framework with latest features
• 📏 ESLint + Prettier - Code formatting and linting
• 🔧 Import Sorting - Automatic import organization
• 🎨 Tailwind Linting - TailwindCSS class sorting and validation
• 📱 TypeScript - Full type safety

🛠️ Tech Stack

• Frontend: React 18 + TypeScript + Vite
• Desktop: Tauri 2.0
• UI Components: Shadcn/ui + Radix UI
• Styling: TailwindCSS 4 + Lucide Icons
• State Management: Zustand + Immer
• Persistence: Tauri Plugin Store
• Code Quality: ESLint + Prettier + TypeScript
• Build Tool: Vite 6

📦 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18 or higher)
• pnpm (recommended) or npm/yarn
• Rust (latest stable)
• Tauri Prerequisites

🚀 Quick Start

1. Clone the repository

   git clone https://github.com/ZingerLittleBee/tauri-react-template.git
   cd tauri-react-template

2. Install dependencies

   pnpm i

3. Start development server

   pnpm tauri dev

4. Build for production

   pnpm tauri build

📝 Available Scripts

• pnpm dev - Start Vite development server
• pnpm build - Build for production
• pnpm preview - Preview production build
• pnpm tauri dev - Start Tauri development mode
• pnpm tauri build - Build Tauri application
• pnpm lint - Run ESLint with auto-fix
• pnpm format - Format code with Prettier

🏗️ Project Structure

tauri-react-template/
├── src/                    # React source code
│   ├── components/         # React components
│   ├── lib/               # Utility functions and configurations
│   ├── stores/            # Zustand stores
│   └── main.tsx           # Application entry point
├── src-tauri/             # Tauri backend code
│   ├── src/               # Rust source code
│   ├── Cargo.toml         # Rust dependencies
│   └── tauri.conf.json    # Tauri configuration
├── public/                # Static assets
└── package.json           # Node.js dependencies and scripts

🎨 UI Components

This template includes a pre-configured Shadcn/ui setup with:

• Beautiful and accessible components
• Dark/light theme support
• Customizable design system
• TailwindCSS integration

To add new components:

pnpm dlx shadcn@latest add button

🐻 State Management

Zustand is configured with:

• Immer integration for immutable updates
• Tauri Store persistence for data that survives app restarts
• TypeScript support for type-safe stores

Example store with Immer:

src/store/immer/immer-store.ts

Example store with persistence:

import { create } from 'zustand'
import { persist } from 'zustand/middleware'
import { tauriStorage } from './tauri-storage'

interface AppState {
  count: number
  increment: () => void
}

export const useAppStore = create<AppState>()(
  persist(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
    }),
    {
      name: 'app-storage',
      storage: tauriStorage,
    }
  )
)

🔧 Configuration

ESLint & Prettier

The project includes a comprehensive ESLint and Prettier setup with:

• React-specific rules
• TypeScript support
• Import sorting with @ianvs/prettier-plugin-sort-imports
• TailwindCSS class sorting with prettier-plugin-tailwindcss

TailwindCSS 4

Configured with:

• Latest TailwindCSS 4 features
• Custom design tokens
• Responsive design utilities
• Dark mode support

🚀 Building for Production

To create a production build:

pnpm tauri build

This will create platform-specific installers in the src-tauri/target/release/bundle/ directory.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📚 Resources

• Tauri Documentation
• React Documentation
• Vite Documentation
• Shadcn/ui Documentation
• Zustand Documentation
• TailwindCSS Documentation

---

Made with ❤️ by ZingerLittleBee