Platform feels
One app, every platform.
Pick macOS, iOS or Windows and every component handles like it: sizes, corners, focus, shadows, menus, sidebars and window controls. Free, and it works on top of any colour theme.
Tauri and Electron apps on a Mac
- Controls
- 28 px
- Corners
- 6 px
- Focus ring
- 3px, 50%
- Text
- 13 px
- Window controls
- Left
- Menu rows
- 24 px
Compact 28 px controls, 13 px text, a soft focus halo, hairline-edged shadows and frosted popovers and sidebars. For desktop apps built with Tauri or Electron that should sit comfortably next to native Mac apps.
What a feel changes
Not just a skin
Control heights, menu rows, text scale, focus ring, shadows, frosted surfaces, press feedback, scrollbars and motion all change together, from one setting.
Works with your colours
A feel never touches colour. Ocean with the Windows feel, Violet with the macOS feel: any theme, any feel.
Picks itself
Install feel-auto and a Mac gets macOS, a Windows PC gets Windows, a phone gets iOS, before the first paint. People can override it.
Real window chrome
app-window is the title bar of a Tauri or Electron app: traffic lights or caption buttons, a drag region, double-click to maximize.
The same app, four feels
Identical markup. Only the handling differs.
Start in a minute
Install the window and let the device choose, or install a single feel. Then wire the buttons to Tauri or Electron; the docs show both.
npx shadcn@latest add @ballmac/feel-auto @ballmac/app-windownpx shadcn@latest add @ballmac/feel-windows<AppWindow
onClose={() => win.close()}
onMinimize={() => win.minimize()}
onMaximize={() => win.toggleMaximize()}
>
<AppWindowTitleBar title="Notes" />
<AppWindowContent>…</AppWindowContent>
</AppWindow>These are web components that feel like each platform, not native controls. Ballmac UI is not affiliated with Apple or Microsoft.