tauri-plugin-frame

Custom window frame controls for Tauri v2 on Windows. Supports Windows 11 Snap Layout and custom titlebar styling.

Platform Support

This plugin is Windows-only. On other platforms, all methods are no-ops.

✅ Windows 11: Full support including Snap Layout overlay.
⚠️ Windows 10: Custom titlebar supported, but Snap Layout overlay is disabled.

Features

Windows 11 Snap Layout - Hover on maximize button to show snap layout picker (Windows 11 only)
Custom Overlay Titlebar - Replace default window decorations with fully customizable titlebar
Builder Pattern Config - Configure height, button width, hover colors via intuitive builder API
CSS Variable Integration - Auto-updated --tauri-frame-controls-width for responsive header layouts
Zero Frontend Code - Plugin auto-injects all scripts, no JavaScript setup required
Auto-apply Mode - Apply titlebar to all windows automatically without per-window setup
Lightweight - Minimal footprint, Windows-only (no-op on other platforms)

Install

cargo add tauri-plugin-frame

Add to src-tauri/capabilities/default.json:

{
  "permissions": [
    "core:window:allow-close",
    "core:window:allow-center",
    "core:window:allow-minimize",
    "core:window:allow-maximize",
    "core:window:allow-set-size",
    "core:window:allow-set-focus",
    "core:window:allow-is-maximized",
    "core:window:allow-start-dragging",
    "core:window:allow-toggle-maximize",
    "frame:default"
  ]
}

Set in tauri.conf.json:

{
  "app": {
    "withGlobalTauri": true,
    "windows": [
      {
        "decorations": false
      }
    ]
  }
}

Usage

Recommended: Auto-apply to all windows

This is the recommended approach - simpler setup and automatically applies to all windows.

use tauri_plugin_frame::FramePluginBuilder;

tauri::Builder::default()
    .plugin(
        FramePluginBuilder::new()
            // Titlebar height in pixels
            .titlebar_height(32)
            // Button width in pixels
            .button_width(46)
            // Automatically apply titlebar to all windows
            .auto_titlebar(true)
            // Delay before pressing Alt to hide snap overlay numbers (ms)
            .snap_overlay_delay_ms(15)
            // Close button hover background color
            .close_hover_bg("rgba(196,43,28,1)")
            // Other buttons hover background color
            .button_hover_bg("rgba(255,255,255,0.1)")
            .build()
    )

Alternative: Manual per window

use tauri::Manager;
use tauri_plugin_frame::WebviewWindowExt;

tauri::Builder::default()
    .plugin(tauri_plugin_frame::init())
    .setup(|app| {
        app.get_webview_window("main").unwrap().create_overlay_titlebar()?;
        Ok(())
    })

Configuration Options

Option	Default	Description
`titlebar_height(u32)`	`32`	Titlebar height in pixels
`button_width(u32)`	`46`	Window control button width in pixels
`auto_titlebar(bool)`	`false`	Auto-apply titlebar to all windows
`snap_overlay_delay_ms(u64)`	`10`	Delay before Alt key press to hide snap overlay numbers
`close_hover_bg(&str)`	`rgba(196,43,28,1)`	Close button hover background color
`button_hover_bg(&str)`	`rgba(0,0,0,0.2)`	Other buttons hover background color

Methods

Method	Description
`create_overlay_titlebar()`	Apply titlebar with configured height
`create_overlay_titlebar_with_height(u32)`	Apply titlebar with custom height

CSS Variable

The plugin automatically sets and updates --tauri-frame-controls-width CSS variable. This makes it easy to build custom header components that need to avoid overlapping with window controls.

Why is this useful?

Window controls (minimize, maximize, close) overlay on top of your content
Your custom header/navbar needs padding to avoid being hidden behind these buttons
The variable auto-updates on window resize, so your layout always stays correct

Example usage:

/* Custom header that respects window controls */
.my-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  padding-right: var(--tauri-frame-controls-width, 138px);
}

/* Navigation tabs that don't overlap with controls */
.tabs {
  margin-right: var(--tauri-frame-controls-width, 138px);
}

Note: Check the examples folder for a working demo of --tauri-frame-controls-width usage.

CSS Styling

/* Titlebar container */
[data-tauri-frame-tb] {
  background: rgba(0,0,0,0.1);
}

/* Window control buttons */
#frame-tb-minimize,
#frame-tb-maximize,
#frame-tb-close {
  /* your styles */
}

License

MIT - Originally forked from tauri-plugin-decorum

tauri-plugin-frame 1.1.5