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.

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

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

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 in Tauri.

Getting Started

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

pnpm tauri dev
pnpm tauri build

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.

To-Do

Titlebar draggable.
Titlebar minimize, maximize, close buttons.
Titlebar double-click maximize.
Decomposing UI into components.
Dark-Light mode switch.
Get simple data from the Rust backend code.

Folder Structure

.
├── next-env.d.ts
├── next.config.js    //nextjs config file https://nextjs.org/docs/api-reference/next.config.js/introduction
├── package.json
├── postcss.config.js
├── README.md
├── public
├── src               //frontend src:
│   ├── app           //next.js appdir https://beta.nextjs.org/docs/routing/fundamentals
│   ├── 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           //rust codes
│   └── 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