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.
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
- 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.
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 runpnpm tauri icon
. This will automatically generate icon files into src-tauri/icons.
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.
.
โโโ 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