tauri-controls

Tauri Controls is a library that provides native-looking window controls for Tauri 2 applications. You can enhance the user experience of your Tauri 2 applications with window controls that mimic the identical native controls on the current system.

tauri-controls uses Tauri's js/ts APIs to handle window events and just provides native-looking (designed according to official system design prototypes) html/react elements, not native, it does not rely on the system's native APIs.

The following designs are taken as reference:

• Windows UI 3 @microsoft
• Apple Design Resources - macOS @apple

How to use

Install Dependencies

pnpm add tauri-controls

#install peer dependencies
pnpm add @tauri-apps/plugin-os @tauri-apps/plugin-window
pnpm add -D clsx tailwind-merge

Then, make sure to include the following tauri plugins in your src-tauri directory:

cargo add tauri-plugin-window tauri-plugin-os

Don't forget to register plugins in your main function.

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

Add to Your Code

And simply add the WindowControls component to your code:

import { WindowControls } from "tauri-controls"

function MyTitlebar() {
  return <WindowControls />
}

When no platform is specified, the current system will be detected and the matching element will be returned. It's a great solution for cross-platform releases.

WindowTitlebar component handles the window controls and dynamically adjusts the control buttons and titlebar content order based on the current operating system.

import { WindowTitlebar } from "tauri-controls"

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

If you get the message "Not allowed by scope" in the terminal after a production build, try this.

Options

// WindowTitlebar:
controlsOrder?: "right" | "left" | "platform" | "system"
windowControlsProps?: WindowControlsProps

// WindowControls:
platform?: "windows" | "macos" | "gnome"
hide?: boolean
hideMethod?: "display" | "visibility"

You can also pass additional props to elements like data-tauri-drag-region for further enhancements.

Examples:

<WindowControls platform="macos" className="my-4" />

<WindowControls
  platform="windows"
  className="w-full justify-end"
  data-tauri-drag-region
/>

More examples.

To-Do

If the library gets some interest, I can gradually add the following features:

• If no platform is specified, the side of the controls will also be determined automatically. (e.g. MacOS left, others right)
• Next.js/SSR support.
• Detect disabled window controls (is_maximizable, ...) and disable the buttons accordingly.
• Svelte/SvelteKit implementation.

Figma

Check out the design implementation on Figma for a visual reference. Desktop Native Window Controls - Figma.

These sources were utilized:

• Windows UI 3 @microsoft
• Apple Design Resources - macOS @apple
• macOS Monterey UI Kit for Figma @joey
• Spotify Desktop App Clone @uidesignguide

Further Reading

• Feature request: Add setting for titlebar style with native window controls support - tauri-apps/tauri#2663
• Window Controls Overlay for Installed Desktop Web Apps - WICG
• Window Controls Overlay - Electron
• Window Controls Overlay API - MDN

License

MIT