Desktop apps

Running a buttery app as a Tauri desktop app, and what changes on the desktop.

buttery apps run as desktop apps through Tauri v2, which wraps the same web code in a native window. Use it when an app should live in the dock and work offline, with the same components as on the web.

Run it

Every app made from the starter is already a Tauri app. With Rust installed, as What you need lists:

pnpm --filter my-app tauri dev

What changes on the desktop

• It knows it's on the desktop

  ButteryProvider sees it's inside Tauri and sets platform to desktop, where controls use the default cursor rather than the pointing hand, as native apps do.

• A header can be the title bar

  HeaderBar takes dragRegion, which lets the window be dragged by the bar's empty space and leaves room for the window controls on macOS.

• It works offline

  The fonts come with @butteryui/core and nothing loads from the network, so the app needs no connection.

• It draws with the system's WebKit

  On macOS the window renders with the system's WebKit, so check desktop builds in Safari's engine too. buttery's own checks run in Chromium and WebKit for this reason.

A header that's the window's title bar is a HeaderBar with dragRegion:

import type { ReactElement } from "react";
import { HeaderBar } from "@butteryui/react";

export function WindowHeader(): ReactElement {
  return <HeaderBar title="Untitled card" dragRegion />;
}

Icons

The starter comes with placeholder app icons. Make your app's own from a 1024px PNG:

pnpm --filter my-app tauri icon app-icon.png