Tauri + Next.js 13 + shadcn/ui

Tauri boilerplate with Next.js 13 and shadcn/ui.

• Tauri
• Next.js 13
• shadcn/ui
• Radix UI
• TypeScript
• Tailwind
• Lucide Icons
• Bundle size optimized Cargo.toml (.msi 2mb)

Getting Started

gh repo clone agmmnn/tauri-ui-boilerplate
cd tauri-ui-boilerplate
yarn

yarn tauri dev
yarn tauri build

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.

Customization

• package.json
• src-tauri/tauri.conf.json
• Update app-icon.png, run yarn tauri icon. This will automatically generate icon files into src-tauri/icons.

Update Components

shadcn/ui is not a library. So you need to update components by hand. 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/api-reference/next.config.js/introduction
├── package.json
├── postcss.config.js
├── README.md
├── src               //frontend src:
│   ├── assets
│   ├── components    //from shadcn/ui
│   │   └── ui        //from shadcn/ui
│   ├── lib
│   ├── pages         //next.js pages folder
│   ├── styles
│   └── types
├── 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://tauri.app/v1/api/config/
├── tailwind.config.js     //tailwind config file
├── tsconfig.json          //typescript config file
└── yarn.lock

Recommended IDE Setup

• VS Code + Tauri + rust-analyzer