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