tauri-window-controls-react

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 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

# React:
bun add tauri-window-controls

# Vue.js:
bun add tauri-window-controls-vue

# Install peer dependencies:
bun add @tauri-apps/plugin-os @tauri-apps/api
bun 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");
}

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

Add to Your Code

And simply add the WindowTitlebar or WindowControls component to your code, depending on your needs:

WindowTitlebar

The WindowTitlebar component handles the window titlebar and dynamically adjusts the window 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>
  )
}

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

WindowControls

Use the WindowControls component only for window controls.

import { WindowControls } from "tauri-controls"

function MyTitlebar() {
  return <WindowControls />
}

More examples:

Options

`WindowTitlebar`:

controlsOrder?: "right" | "left" | "platform" | "system": Specifies the order of window controls. platform: to get OS-based positioning specified in windowControlsProps. system: to automatically detect the platform and position the controls accordingly (default).
windowControlsProps?: WindowControlsProps: Additional props to pass to the WindowControls component.

`WindowControls`:

platform?: "windows" | "macos" | "gnome": Specifies which platform's window controls to display. If the platform property is not specified, the library will automatically detect the operating system the app is running on and display the appropriate element.
justify?: boolean: If set to true, WindowControls will justify/snap in the flexbox where it is located.
hide?: boolean: If set to true, the window controls will be hidden.
hideMethod?: "display" | "visibility": Determines how the window controls will be hidden.

You can also provide additional props to elements, such as data-tauri-drag-region, for further enhancements.

Development and Contribution

pnpm dev

pnpm tauri:dev

Project Structure:

.
├── /apps
│   ├── /tauri-controls            # Main application (React)
│   ├── /tauri-controls-solid      # Solid.js implementation
│   └── /tauri-controls-svelte     # Svelte implementation
├── /packages                       # Shared packages
├── package.json                    # Project configuration
├── pnpm-workspace.yaml             # Workspace configuration
└── turbo.json                      # TurboRepo configuration

License

MIT