tauri-ui

🦀 Tauri + shadcn/ui starter. Pick your framework and start building. Vite, Next.js, React Router, Astro, TanStack Start.

2,098

119

2,098

View on GitHub

Top Related Projects

tauri

108,057

Build smaller, faster, and more secure desktop and mobile applications with a web frontend.

electron

122,119

:electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS

nativefier

35,320

Make any web page a desktop application

wails

35,126

Create beautiful applications using Go

neutralinojs

8,546

Portable and lightweight cross-platform desktop application development framework

revery

8,046

:zap: Native, high-performance, cross-platform desktop apps - built with Reason!

Quick Overview

Tauri UI is a collection of user interface components and templates for Tauri applications. It provides a set of pre-built, customizable UI elements that can be easily integrated into Tauri projects, helping developers create attractive and functional desktop applications using web technologies.

Pros

Offers a variety of ready-to-use UI components specifically designed for Tauri applications
Helps streamline the development process by providing pre-built templates and layouts
Supports customization and theming to match specific application designs
Integrates well with Tauri's ecosystem and best practices

Cons

Limited documentation and examples compared to more established UI libraries
May have a steeper learning curve for developers new to Tauri or web-based desktop applications
Potential for inconsistencies or bugs due to the project's relatively young age
Smaller community and ecosystem compared to more popular UI frameworks

Code Examples

Creating a basic button component:

#[derive(Clone, serde::Serialize)]
struct Payload {
    message: String,
}

#[tauri::command]
fn greet(name: &str) -> Payload {
    Payload {
        message: format!("Hello, {}! You've been greeted from Rust!", name),
    }
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

Implementing a simple dialog:

import { dialog } from '@tauri-apps/api';

async function showDialog() {
  const result = await dialog.confirm('Are you sure?', 'Confirmation');
  if (result) {
    console.log('User confirmed');
  } else {
    console.log('User cancelled');
  }
}

Creating a custom window:

import { WebviewWindow } from '@tauri-apps/api/window';

const webview = new WebviewWindow('my-window', {
  url: 'path/to/page.html',
  title: 'My Custom Window',
  width: 800,
  height: 600,
  resizable: true,
});

webview.once('tauri://created', function () {
  console.log('Window created');
});

Getting Started

To get started with Tauri UI, follow these steps:

Install Tauri CLI:

npm install -g @tauri-apps/cli

Create a new Tauri project:

npm init tauri-app my-tauri-ui-app
cd my-tauri-ui-app

Install Tauri UI components:

npm install @tauri-ui/components

Import and use Tauri UI components in your application:

import { Button } from '@tauri-ui/components';

function App() {
  return (
    <div>
      <h1>My Tauri UI App</h1>
      <Button onClick={() => console.log('Button clicked')}>
        Click me!
      </Button>
    </div>
  );
}

Competitor Comparisons

tauri

108,057

Build smaller, faster, and more secure desktop and mobile applications with a web frontend.

Pros of Tauri

Official framework with extensive documentation and community support
More comprehensive feature set for building cross-platform desktop applications
Active development and regular updates from the core team

Cons of Tauri

Steeper learning curve for beginners
Requires more setup and configuration compared to Tauri-UI
Larger project size due to its full-featured nature

Code Comparison

Tauri (main.rs):

#![cfg_attr(
  all(not(debug_assertions), target_os = "windows"),
  windows_subsystem = "windows"
)]

fn main() {
  tauri::Builder::default()
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

Tauri-UI (main.rs):

#![cfg_attr(
  all(not(debug_assertions), target_os = "windows"),
  windows_subsystem = "windows"
)]

fn main() {
  tauri::Builder::default()
    .setup(|app| {
      let window = app.get_window("main").unwrap();
      Ok(())
    })
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

The code comparison shows that Tauri-UI provides a slightly more opinionated setup with a pre-configured window, while Tauri offers more flexibility in configuration.

electron

122,119

:electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS

Pros of Electron

Mature ecosystem with extensive documentation and community support
Cross-platform compatibility with a single codebase
Easier learning curve for web developers

Cons of Electron

Larger application size due to bundled Chromium and Node.js
Higher memory usage and slower performance compared to native apps
Security concerns due to full system access

Code Comparison

Electron (main process):

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

Tauri-UI (src-tauri/src/main.rs):

#![cfg_attr(
  all(not(debug_assertions), target_os = "windows"),
  windows_subsystem = "windows"
)]

fn main() {
  tauri::Builder::default()
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

Tauri-UI offers a more lightweight alternative to Electron, with smaller app sizes and better performance due to its Rust backend. However, Electron benefits from a larger ecosystem and easier development for those familiar with web technologies. The code comparison shows the different approaches: Electron uses JavaScript for its main process, while Tauri-UI utilizes Rust for its core functionality.

nativefier

35,320

Make any web page a desktop application

Pros of Nativefier

Simpler setup and usage, requiring minimal configuration
Supports a wider range of platforms, including older operating systems
More established project with a larger community and extensive documentation

Cons of Nativefier

Larger application size due to bundling Electron
Less performant compared to native applications
Limited customization options for the application's appearance and behavior

Code Comparison

Nativefier (JavaScript):

nativefier 'https://example.com' --name 'My App' --icon icon.png

Tauri UI (Rust):

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

Tauri UI focuses on creating native, lightweight applications using web technologies and Rust, while Nativefier wraps web applications in Electron for desktop use. Tauri UI offers better performance and smaller file sizes but requires more setup and coding knowledge. Nativefier provides a quick solution for creating desktop apps from websites but sacrifices performance and customization options.

wails

35,126

Create beautiful applications using Go

Pros of Wails

More mature and established project with a larger community
Supports multiple backend languages (Go, Rust, C++)
Offers built-in tooling for app packaging and distribution

Cons of Wails

Larger bundle sizes compared to Tauri-UI
Less focus on security features than Tauri-UI
Steeper learning curve for developers new to Go

Code Comparison

Wails (Go):

package main

import "github.com/wailsapp/wails/v2/pkg/runtime"

func (a *App) Greet(name string) string {
    return fmt.Sprintf("Hello %s!", name)
}

Tauri-UI (Rust):

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

Both frameworks allow easy integration of backend functions with the frontend, but Wails uses Go while Tauri-UI uses Rust. Tauri-UI generally results in smaller bundle sizes and has a stronger focus on security, while Wails offers more language options and a more established ecosystem. The choice between them often depends on the developer's preferred language and specific project requirements.

neutralinojs

8,546

Portable and lightweight cross-platform desktop application development framework

Pros of Neutralinojs

Lighter weight and more minimal than Tauri-UI
Supports a wider range of programming languages for backend development
Simpler architecture with fewer dependencies

Cons of Neutralinojs

Less robust security features compared to Tauri-UI's Rust-based backend
Smaller community and ecosystem than Tauri-UI
Fewer built-in UI components and design system options

Code Comparison

Neutralinojs:

const options = {
  url: 'myapp://',
  width: 800,
  height: 600,
  maximizable: false
};
Neutralino.window.setOptions(options);

Tauri-UI:

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! You've been greeted from Rust!", name)
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

The code examples showcase the different approaches: Neutralinojs uses JavaScript for both frontend and backend, while Tauri-UI separates concerns with Rust for the backend and JavaScript/TypeScript for the frontend.

revery

8,046

:zap: Native, high-performance, cross-platform desktop apps - built with Reason!

Pros of Revery

Native performance with OCaml and Reason
Cross-platform support for desktop and mobile
Lightweight and fast rendering engine

Cons of Revery

Smaller community and ecosystem compared to Tauri
Steeper learning curve for developers unfamiliar with OCaml/Reason
Less extensive documentation and examples

Code Comparison

Revery (OCaml/Reason):

let app = App.create();

let win = Window.create(
  ~createOptions=WindowCreateOptions.create(~width=800, ~height=600, ()),
  app,
);

let element = <View style=Style.[width(100), height(100), backgroundColor(Colors.red)] />;

UI.start(win, element);

Tauri-UI (JavaScript/TypeScript):

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

// In App.vue
<template>
  <div style="width: 100px; height: 100px; background-color: red;"></div>
</template>

Revery offers a more native approach with OCaml/Reason, while Tauri-UI leverages web technologies for UI development. Revery provides better performance but has a steeper learning curve, whereas Tauri-UI offers easier development with familiar web technologies but may have slightly lower performance. Both support cross-platform development, but Tauri-UI has a larger ecosystem and community support.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

tauri-ui

â¡ The fastest way to build a Tauri desktop app with shadcn/ui.

One command â shadcn frontend + native shell + desktop-ready defaults.
No templates to maintain â upstream CLIs do the heavy lifting.

Get started

bunx create-tauri-ui@latest

Each release includes a demo build showing the expected output â available in Releases.

After scaffold

cd my-app
bun install
bun run tauri dev

swap icons: bunx tauri icon ./app-icon.png
add shadcn components: bunx shadcn@latest add dialog sonner
add tauri plugins: bun run tauri add store (plugin list)
batteries live in src/components/ (debug-panel, external-link-guard, theme-provider)
tweak window defaults in src-tauri/tauri.conf.json
CLI flags + opt-outs â packages/create-tauri-ui

ð Batteries Included

no startup flash (hidden until first paint)
external links open in system browser
no overscroll / rubber-band scrolling
desktop-style selection behavior
sensible default window size and position

â Extras (optional)

starter dashboard (dashboard-01)
Rust invoke example
smaller binary output (~65% smaller binary in our test)
GitHub Actions release workflow

ð Debug Panel Â Â·Â Cmd / Ctrl + D

inspects app state, route, window, tracked invokes, runtime events, plugin logs, and system paths
live host diagnostics: theme & a11y, locale, display, input, network
hover any field for the source snippet with a web / tauri origin chip â click to copy
dev-only, zero production impact â dockable and remembers its layout

ð§± Upstream UI

shadcn frontend generated via official CLI
no forks, always up to date
adapters for vite, next, react-router, astro, start

Why tauri-ui

A fresh Tauri app feels like a wrapped website. Window state, startup flash, link routing, overscroll, native selection: chores you hit on every project.

tauri-ui handles them by default and stays close to upstream shadcn and create-tauri-app. Nothing forks, nothing drifts from the docs.

ð¦¾ Better with AI coding agents: one command lands a familiar shadcn + Tauri layout your agent already knows. No custom wrappers, no forked libraries, just the upstream APIs the agent was trained on. No tokens burned debating the stack.

How it works

cli prompts
  â official shadcn/ui init
  â official create-tauri-app setup
  â combine frontend + native shell
  â apply desktop-ready defaults
  â add optional batteries

No full local templates. Just a small asset and patch surface on top of the upstream CLIs.

Manage batteries after scaffold

Run inside an existing tauri-ui project to add, update, or remove batteries without re-scaffolding:

Template auto-detected (no manifest file written to your repo), updates are idempotent; commit first and review the diff.

bunx create-tauri-ui@latest list                  # show install status
bunx create-tauri-ui@latest update debug-panel    # pull the latest template
bunx create-tauri-ui@latest add workflow          # add the release workflow later
bunx create-tauri-ui@latest remove workflow

ð§âð³ Built with tauri-ui

speedbox â internet and DNS speed test desktop app.

Built something with tauri-ui? Open a PR adding it to this list â one line with a link and a short description.

ð CLI reference and full options â packages/create-tauri-ui

License

MIT

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of Tauri

Cons of Tauri

Code Comparison

Pros of Electron

Cons of Electron

Code Comparison

Pros of Nativefier

Cons of Nativefier

Code Comparison

Pros of Wails

Cons of Wails

Code Comparison

Pros of Neutralinojs

Cons of Neutralinojs

Code Comparison

Pros of Revery

Cons of Revery

Code Comparison

Convert designs to code with AI

README

tauri-ui

Get started

After scaffold

ð Batteries Included

Why tauri-ui

How it works

Manage batteries after scaffold

ð§âð³ Built with tauri-ui

License

Top Related Projects

Convert designs to code with AI

ð Batteries Included

ð§âð³ Built with tauri-ui