Tauri UI Template

Tauri UI Template is a starting point for building modern desktop applications with web technologies. Customizable UI components with shadcn/ui, a lightweight and secure desktop app framework Tauri 2, the React-based framework Next.js 13, the utility-first CSS framework Tailwind.

You can download pre-built final bundles from the Releases section.

Getting Started

Use create-tauri-ui to quickly scaffold a Tauri UI project.

pnpm create tauri-ui

Or clone the repository

gh repo clone agmmnn/tauri-ui
cd tauri-ui

pnpm i
pnpm tauri dev
pnpm tauri build

Features

• Support for dark and light modes
• Components-based UI design
• A draggable titlebar with minimize, maximize, and close buttons
• Radix UI for UI primitives
• Lucide Icons
• Bundle size optimized Cargo.toml (.msi 2.2mb, .dmg 1.9mb, .deb 2mb)
• Tauri GitHub Action

Next.js is used in this template to facilitate quick integration of the /examples directory of shadcn/ui. You can also easily use shadcn/ui with the React + Vite stack and any React router library (optionally) in Tauri.

Customization

The template can be customized by editing the following files:

• src-tauri/tauri.conf.json
• package.json
• src-tauri/cargo.toml
• To change the app icon, update app-icon.png, and then run pnpm tauri icon. This will automatically generate icon files into src-tauri/icons.

Update Components

Note that shadcn/ui is not a library, therefore you will need to update the components manually. To do so, you can download the shadcn/ui/apps/www/components/ui directory and paste it into src/components/ui.

Folder Structure

.
├── next-env.d.ts
├── next.config.js    //nextjs config file https://nextjs.org/docs/pages/api-reference/next-config-js
├── package.json
├── postcss.config.js
├── README.md
├── public
├── src               //frontend src:
│   ├── app           //next.js appdir https://nextjs.org/docs/app/building-your-application/routing
│   ├── assets
│   ├── components    //from shadcn/ui
│   │   └── ui
│   ├── data
│   ├── hooks
│   ├── lib
│   └── styles
├── src-tauri         //backend src:
│   ├── build.rs
│   ├── Cargo.lock
│   ├── Cargo.toml    //https://doc.rust-lang.org/cargo/reference/manifest.html
│   ├── icons         //https://tauri.app/v1/guides/features/icons/
│   ├── src
│   └── tauri.conf.json  //tauri config file https://next--tauri.netlify.app/next/api/config
├── prettier.config.js     //prettier config file https://prettier.io/docs/en/configuration.html
├── tailwind.config.js     //tailwind config file https://tailwindcss.com/docs/configuration
└── tsconfig.json          //typescript config file https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Recommended IDE Setup

• VS Code + Tauri + rust-analyzer