Repository files navigation

Tauri Controls is a library that provides native-lookingwindow controls forTauri 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'sjs/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

# 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

# Install peer dependencies:bun add @tauri-apps/plugin-os @tauri-apps/apibun add -D clsx tailwind-merge

ForSvelte projects, include the following line in thecontent section of yourtailwind.config.js:

"./node_modules/@tauri-controls/svelte/**/*.{js,svelte,ts}"

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

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

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

fnmain(){    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, trythis.

And simply add theWindowTitlebar orWindowControls component to your code, depending on your needs:

TheWindowTitlebar component handles the window titlebar and dynamically adjusts thewindow control buttons andtitlebar content order based on the current operating system.

import{WindowTitlebar}from"tauri-controls"functionMyTitlebar(){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.

Use theWindowControls component only for window controls.

import{WindowControls}from"tauri-controls"functionMyTitlebar(){return<WindowControls/>}

• in React
• in Svelte
• in Solid.js
• in Vue.js

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

• platform?: "windows" | "macos" | "gnome": Specifies which platform's window controls to display. If theplatform 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 totrue,WindowControls will justify/snap in the flexbox where it is located.
• hide?: boolean: If set totrue, 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 asdata-tauri-drag-region, for further enhancements.

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

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

If you're interested in contributing, check out ourTODO list for tasks you can help with. Your contributions are appreciated!

This project is made possible by the contributions of various individuals. Thank you to all the contributors who have helped make this project better.

• tauri-controls,@tauri-controls/svelte:@agmmnn
• @tauri-controls/solid:@ronanru
• @tauri-controls/vue:@allenli178

• 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

MIT