Tauri Controls

Install the specific package for your frontend framework using bun.

• React: tauri-controls
• Svelte: @tauri-controls/svelte
• Solid.js: @tauri-controls/solid
• Vue.js: @tauri-controls/vue

# React
bun add tauri-controls

# Svelte
bun add @tauri-controls/svelte

# Solid.js
bun add @tauri-controls/solid

# Vue.js
bun add @tauri-controls/vue

To use Tauri controls within a SolidJS project, install the @tauri-controls/solid package using pnpm.

pnpm add @tauri-controls/solid

To use Tauri controls within a Vue.js project, install the @tauri-controls/vue package using pnpm.

pnpm add @tauri-controls/vue

To use Tauri controls within a Svelte project, install the @tauri-controls/svelte package using your preferred package manager.

pnpm add @tauri-controls/svelte

The controlsOrder prop in WindowTitlebar controls the layout of the window controls relative to the children content:

• system: The platform-aware default. On macOS, controls are placed on the left. On other operating systems (Windows/Linux), controls are placed on the right.
• left: Forces the WindowControls to the left side of the titlebar.
• right: Forces the WindowControls to the right side of the titlebar.

To access Tauri window controls (minimize, maximize, fullscreen, close) within a React application, wrap your component tree with the TauriAppWindowProvider. This provider manages the connection to the Tauri window API and tracks the window's maximized state.

Note: The provider uses dynamic imports for @tauri-apps/api to ensure compatibility with SSR frameworks like Next.js, SvelteKit, or Nuxt.

import { TauriAppWindowProvider } from "@tauri-controls/react"; // Adjust import path based on your installation

function App() {
  return (
    <TauriAppWindowProvider>
      <MyWindowControls />
    </TauriAppWindowProvider>
  );
}

The WindowTitlebar component manages the entire window titlebar area. It automatically adjusts the order of window control buttons (minimize, maximize, close) and titlebar content based on the detected operating system. This makes it ideal for cross-platform applications.

If no platform is specified, it defaults to system detection.

import { WindowTitlebar } from "tauri-controls"

function MyTitlebar() {
  return (
    <WindowTitlebar>{/* Place your titlebar content here */}</WindowTitlebar>
  )
}

The WindowControls component is used when you only want to render the window control buttons (e.g., minimize, maximize, close) without the titlebar area. This is useful when you are building a custom titlebar and only need the buttons to be placed in a specific location.

import { WindowControls } from "tauri-controls"

function MyTitlebar() {
  return <WindowControls />
}

The WindowTitlebar component accepts the following options:

• controlsOrder?: "right" | "left" | "platform" | "system": Specifies the order of window controls.
  • platform: Uses OS-based positioning specified in windowControlsProps.
  • system: Automatically detects the platform and positions controls accordingly (default).
• windowControlsProps?: WindowControlsProps: Additional props to pass down to the underlying WindowControls component.

The WindowControls component accepts the following options:

• platform?: "windows" | "macos" | "gnome": Specifies which platform's window controls to display. If omitted, the library automatically detects the OS.
• justify?: boolean: If true, WindowControls will justify/snap in the flexbox where it is located.
• hide?: boolean: If true, the window controls will be hidden.
• hideMethod?: "display" | "visibility": Determines how the window controls are hidden (using CSS display or visibility).

You can also pass standard HTML attributes like data-tauri-drag-region to enhance window dragging behavior.

The tauri-controls package provides platform-specific components to render window controls (like minimize, maximize, and close buttons) that match the user's operating system. You can import the appropriate component based on the target platform:

• Windows: For Windows-style controls.
• MacOS: For macOS-style controls.
• Gnome: For Linux (Gnome) style controls.

These are exported from the main controls entrypoint.

import { Windows, MacOS, Gnome } from "tauri-controls/controls";

// Usage depends on the detected platform
function MyWindowControls() {
  return <Windows />;
}