customizing-tauri-windows

Implements custom titlebars, transparent windows, and native menus in Tauri v2 desktop applications.

Updated Jun 7, 2026
One-click install
npx skills add https://github.com/dt418/better-shot-x --skill customizing-tauri-windows-dt418
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: customizing-tauri-windows
Source: https://github.com/dt418/better-shot-x/tree/main/.agents/skills/customizing-tauri-windows
Command: npx skills add https://github.com/dt418/better-shot-x --skill customizing-tauri-windows-dt418

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building a polished desktop app with Tauri often requires replacing the default OS window chrome with a custom titlebar, configuring transparent windows, and wiring up native application menus with keyboard shortcuts—tasks that involve scattered configuration across tauri.conf.json, capability permissions, Rust, and frontend code. ## Core Features & Use Cases - Custom Titlebars: Disable window decorations, configure drag regions with data-tauri-drag-region, and wire minimize/maximize/close buttons via the JavaScript Window API. - Transparent Windows: Configure transparent windows including macOS-specific transparent titlebar styling using the cocoa crate and TitleBarStyle. - Window Menus & Accelerators: Build application menus and submenus in JavaScript or Rust, handle menu events, and bind keyboard shortcuts like CmdOrCtrl+S. - Use Case: You are building a Tauri 2 desktop app and want a frameless window with a branded titlebar, a File/Edit menu with standard shortcuts, and a macOS transparent titlebar that preserves native window snapping. ## Quick Start Ask the assistant to add a custom titlebar with drag region and window control buttons to your Tauri v2 app, including the required capability permissions.

Frequently Asked Questions about customizing-tauri-windows

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a custom titlebar in Tauri v2?

Set decorations to false in tauri.conf.json, add a titlebar div with the data-tauri-drag-region attribute, and wire minimize, maximize, and close buttons using getCurrentWindow from @tauri-apps/api/window. You must also grant window permissions like core:window:allow-start-dragging in your capability file.

How to add application menus and keyboard shortcuts in Tauri?

Use Submenu and MenuItem from @tauri-apps/api/menu in JavaScript, or MenuBuilder and SubmenuBuilder in Rust, then call setAsAppMenu or app.set_menu. Shortcuts are declared with accelerator strings like CmdOrCtrl+S, and events are handled via on_menu_event in Rust.

Why is my Tauri drag region not working on titlebar buttons?

The data-tauri-drag-region attribute applies only to the element it is set on, not its children. This preserves button interactivity, so add the attribute to each child element you want draggable, or use startDragging manually on mousedown.

Does a custom titlebar on macOS lose native window features?

Yes, fully custom titlebars on macOS lose native behaviors like window snapping. Using TitleBarStyle::Transparent with the cocoa crate to set the NSWindow background color preserves these native features while still allowing custom styling.

Can I update Tauri menu items dynamically at runtime?

Yes. In JavaScript, retrieve an item with menu.get('id') and call setText; in Rust, use menu.get("id") with as_menuitem_unchecked().set_text(). This works for updating labels such as status indicators after the menu is created.