agmmnn/tauri-ui

🦀 Create modern Tauri desktop apps in just a few simple steps with shadcn/ui. React, Next.js, Sveltekit.

updates soon

Create modern Tauri desktop apps in just a few simple steps. Tauri UI Templates is a starting point for building modern desktop applications with web technologies with using shadcn/ui, Tauri.

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

Getting Started

Use create-tauri-ui to quickly scaffold a Tauri UI project.

pnpm create tauri-ui

npx create-tauri-ui@latest
pnpm create tauri-ui
npm create tauri-ui@latest
yarn create tauri-ui

Then follow the prompts!

You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a Tauri-UI project, run:

# npm 7+, extra double-dash is needed:
npm create tauri-ui@latest my-tauri-app -- --template vite

# yarn
yarn create tauri-ui my-tauri-app --template next

# pnpm
pnpm create tauri-ui my-tauri-app --template sveltekit

You can use . for the project name to scaffold in the current directory.

Or clone the repository

gh repo clone agmmnn/tauri-ui
cd tauri-ui/templates/<template>

pnpm i
pnpm tauri dev
pnpm tauri build

Features

• Components-based UI design with shadcn/ui. Radix UI for UI primitives.
• Native-looking window controls with tauri-controls.
• Support for dark and light modes.
• Lucide Icons, Radix Icons.
• Bundle size optimized Cargo.toml (.msi 2.5mb, .dmg 1.9mb, .deb 2mb)
• Tauri GitHub Action, Cross-platform releases.

Update Components

shadcn/ui

Update all components:

npx shadcn-ui@latest add --overwrite
# press "a" to select all components

Update a specific component:

npx shadcn-ui@latest add dialog --overwrite

Acknowledgements

This project utilizes code from the following repository:

• vitejs/create-vite - Used in create-tauri-ui
• shadcn/ui - Used in Next.js and Vite templates
• huntabyte/shadcn-svelte - Used in SvelteKit template

tauri-ui's Issues

appDir with 'next export' cause error

vercel/next.js#44002

https://beta.nextjs.org/docs/app-directory-roadmap#supported-and-planned-features

How to use input-file in form

Fullscreen does not function properly on MacOS

On a Windows 10 machine this ui functions perfectly as intended and fullscreen is exclusive and takes up the whole screen. However on MacOS (Specifically an M2 Macbook air running macOS Monterey 12.5.1) The fullscreen function does not work as intended. It simply sets the app to take up the space above the icon tray on a desktop window and does not achieve exclusive fullscreen taking up the entire screen. It's incredibly annoying as it automatically assigns a scroll bar on the side and cuts of parts of the app given the limited space. The MacOS shortcut to fullscreen doesn't do anything to fix it either. I've ensured that I've built it for the correct architecture as well and nothing seems to fix it. Is there anything that can be done to get exclusive fullscreen on MacOS?

env: node\r: No such file or directory on macOS

Node: v20.11.0
Yarn: 1.22.19

fix: classname does not exists in src/components/ui/dialog.tsx and .../ui/alert-dialog.tsx

How to reproduce?

Command: npm create tauri-ui

-> Next.js

Command: npm install && npm run build

Output:

> npm run build

> [email protected] build
> next build

 ✓ Creating an optimized production build
 ✓ Compiled successfully
   Linting and checking validity of types  .Failed to compile.

./src/components/ui/dialog.tsx:14:3
Type error: Property 'className' does not exist on type 'DialogPortalProps'.

Merge branch 'main' of https://github.com/marcelldac/tauri-ui
  12 |
  13 | const DialogPortal = ({
> 14 |   className,
     |   ^
  15 |   ...props
  16 | }: DialogPrimitive.DialogPortalProps) => (
  17 |   <DialogPrimitive.Portal className={cn(className)} {...props} />

I just deleted classname of this errors

How do i make this works?

error[E0428]

error[E0428]: the name ERROR_CTX_GRAPHICS_INVALID is defined multiple times
--> C:\Users\alvin.cargo\registry\src\github.com-1ecc6299db9ec823\winapi-0.3.9\src\shared\winerror.rs:1803:1
|
1802 | pub const ERROR_CTX_GRAPHICS_INVALID: DWORD = 7035;
| ------------------------------------------- previous definition of the value ERROR_CTX_GRAPHICS_INVALID here
1803 | pub const ERROR_CTX_LOGON_DISABLED: DWORD = 7037;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ERROR_CTX_GRAPHICS_INVALID redefined here
|
= note: ERROR_CTX_GRAPHICS_INVALID must be defined only once in the value namespace of this module

Compiling serde_urlencoded v0.7.1
For more information about this error, try rustc --explain E0428.
error: could not compile winreg due to previous error
warning: build failed, waiting for other jobs to finish...

Svelte is still old Version

Hey, first thank you for the awesome boilerplate! I am currently struggling with the Svelte Version of the template it looks like it is still installing a old version, without the added templates and esp. without the tauri-controls, which really add a nice touch. I attached a screenshot:

Oh and on a side note it also looks like no components.json file isn't created, which is required for adding new shadcn controls.

I tried:

• pnpm create tauri-ui
• npx create-tauri-ui@latest
• npm create tauri-ui@latest

All with the same results :/

Thanks in advance!

where does the endpoint showing in gif exist

as you can see , I can not click any of the element in this dashboard ,it seems freezing

but in the browser mode it seems works but still no endpoint like. examples/dashboard examples/cards

error during setting up next js template

When I tried react setup of tauri using instruction on tauri site, I didn't get any error. So all dependancies are installed.
Could you please look into it.

installation issues on mac(intel)

Dear team,
Thanks for this work.
Just found the command cannot work well when I tried to initiate the project. Thanks in advance.

saraiqx@saraiqxdeMacBook-Pro sveltekit % npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/svelte
npm ERR!   dev svelte@"^4.1.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer svelte@"^3.49.0" from @tanstack/[email protected]
npm ERR! node_modules/@tanstack/svelte-table
npm ERR!   @tanstack/svelte-table@"^8.9.4" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

mac next template error

Unhandled Runtime Error
TypeError: segments.at is not a function. (In 'segments.at(-1)', 'segments.at' is undefined)

Support for Tauri 1.x

pnpm create tauri-ui installs the latest alpha version of tauri, How do I switch to tauri1.4?

where does the endpoint showing in gif exist

as you can see , I can not click any of the element in this dashboard ,it seems freezing

but in the browser mode it seems works but still no endpoint like. examples/dashboard examples/cards

Window freezes after fresh tauri-ui installation with Vite + React

Hello,
First, nice job on your templates.
I currently have an issue starting my application using tauri-ui just after initialization.

I successfully ran pnpm install, no issue

But when I try to run pnpm tauri dev, the application window appears, but freezes instantly, without giving any stack trace or error. I only can force close the application.

Any guess ? Thank you!