component · platform-aware chrome

TuxAppFrame

Custom Tauri titlebar with platform-correct window controls — traffic lights on macOS (top-left), min/max/close on Windows (top-right with native snap-layouts), close-only fallback on Linux. Hosts brand surfaces (eyebrow + title) and toolbar slots (#left / #center / #right).

Detected host: web · Tauri: false · Modifier: ctrl. See platform-awareness doctrine.

basic · platform-detected

Title + eyebrow only

Renders platform-correct chrome based on the current host. Pass forceChrome to render the platform-correct chrome even outside Tauri (the showcase route does this so the controls are visible on plain web).

research dashboard

Landscape

<tux-app-frame
  title="Landscape"
  eyebrow="research dashboard"
  :force-chrome="true"
/>

slots · brand + search + actions

All slots filled

#left for brand, #center for search / breadcrumbs, #right for toolbar items. The center slot stretches; left + right are content-width.

TTI · Landscape
<tux-app-frame title="Landscape" :force-chrome="true">
  <template #left>
    <span class="font-bold text-brand-primary">TTI · Landscape</span>
  </template>
  <template #center>
    <UInput placeholder="Search…" icon="lucide:search" size="sm" />
  </template>
  <template #right>
    <UButton variant="ghost" icon="lucide:bell" aria-label="Notifications" />
    <UButton variant="ghost" icon="lucide:user" aria-label="User account" />
  </template>
</tux-app-frame>

when to use it

Tauri custom decoration

TuxAppFrame is for Tauri shells that disable native window decorations (decorations: false in tauri.conf.json) so the brand surface can host TUX content (eyebrow / display-face title / editorial chrome) inside the titlebar strip. On plain web, the frame renders without controls — useful as a top brand bar. See the platform-awareness doctrine for the constrained-use stance on Liquid Glass and Mica materials.