Tenor UI GIF

You must obtain a Tenor API key. Please check out this link to learn how to get one.

Original UI GIF

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
• 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)

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

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