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, and more.

Support for dark and light modes
Components-based UI design
A draggable titlebar with minimize, maximize, and close buttons
Interfacing with Rust backend code for more complex logic
Radix UI for UI primitives
TypeScript
Lucide Icons
Bundle size optimized Cargo.toml (.exe 3mb, .msi 2mb)

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:

package.json
src-tauri/tauri.conf.json
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

chrisco512 / tauri-ui