sdvina / tauri-controls

🚥 Native-looking window controls for Tauri 2. React, Solid, Vue, Svelte+Tailwind.

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

For Svelte projects, include the following line in the content section of your tailwind.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-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:

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

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.

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

Development and Contribution

bun dev

bun 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 our TODO list for tasks you can help with. Your contributions are appreciated!

Contributors

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

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