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
# 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/api
bun add -D clsx tailwind-mergeFor Svelte projects, include the following line in the
contentsection of yourtailwind.config.js:"./node_modules/@tauri-controls/svelte/**/*.{js,svelte,ts}"
Then, make sure to include the following tauri plugins in your src-tauri directory:
cargo add tauri-plugin-window tauri-plugin-osDon'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.
And simply add the WindowTitlebar or WindowControls component to your code, depending on your needs:
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.
Use the WindowControls component only for window controls.
import { WindowControls } from "tauri-controls"
function MyTitlebar() {
return <WindowControls />
}
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 theWindowControlscomponent.
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 totrue,WindowControlswill 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 as data-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 dev
bun tauri:devProject 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 configurationIf you're interested in contributing, check out our TODO 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent