Making a Tauri or Electron app look native on macOS

Users cannot always say why an app feels off, but they notice within seconds. With Electron and Tauri the reason is almost always the same: the app still behaves like a web page inside a window. Fixing it is a list of small, specific changes, and none of them is a new component library.

The titlebar

A native Mac app puts its content right up to the top of the window, with the traffic lights floating over a sidebar. The default web-tech window has a grey titlebar with the app name in it, which looks like a browser.

// Electron
new BrowserWindow({
  titleBarStyle: "hiddenInset",
  trafficLightPosition: { x: 16, y: 18 },
});

// Tauri 2, tauri.conf.json > app > windows[0]
{ "titleBarStyle": "Overlay", "hiddenTitle": true }

Then make the top strip draggable (-webkit-app-region: drag in Electron, data-tauri-drag-region in Tauri), and leave clear space so no button sits under the traffic lights. A custom titlebar in Tauri goes through that step by step.

Sizes: smaller than the web

Mac apps use 13px for most interface text, controls around 22 to 28 pixels tall, and a sidebar a little under 300 pixels wide. Web defaults are 16px and 40px buttons, which make an app look like it was built for a touch screen. Shrinking everything to desktop density is the single largest change you can make.

The web tells to remove

• cursor: pointer on buttons. Mac controls use the arrow. The hand is for links.
• Selectable labels. Add user-select: none to chrome and controls; leave it on content.
• Focus rings that look like a browser's. Use the accent colour ring the system uses.
• Hover effects on everything. Native controls change on press more than on hover.
• Page-style scrolling of the whole window. Scroll the content pane; keep the sidebar and toolbar still.

Colour that means something

Apple's system colours have jobs: blue for the default action and selection, red for destructive actions, green for success. Use them for those jobs and nothing else. Destructive buttons in Mac apps are usually tinted, red text on a faint red fill, not a solid red block.

Type

The system stack gives you San Francisco on a Mac with nothing to ship. The SF Pro font stack in CSS has the exact line and what it does on other systems.

macOS Native Dark UI writes all of this down for Claude, from free-mac.online: an overlay titlebar clear of the traffic lights, a 272px sidebar, 13px controls, the arrow cursor, a sliding segmented control and tinted destructive buttons.