/tauri-controls-solid

🚥 Native-looking window controls for Tauri 2. (Solid+Tailwind)

Primary LanguageTypeScriptMIT LicenseMIT

Shows an illustrated sun in light color mode and a moon with stars in dark color mode.

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:

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:

Further Reading

License

MIT