InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @videorc/window-frame

UsageCopy Anchor Link

import { WindowFrame, WindowHeader } from "@/components/window-frame";

<WindowFrame className="flex flex-col">
  <WindowHeader platform={platform} title="Notes">
    <PinWindowButton onPinnedChange={setPinned} pinned={pinned} />
  </WindowHeader>
  …
</WindowFrame>

Use it for a single-pane window: Stream Manager, Notes, the Captions reader. Lead with one WindowHeader: the title as the window's h1, an optional quiet meta fact after it, and the window's few controls at the end. Stream Manager keeps its row to the title: the Stream Manager block is that window, whole.

Don't use it in the main window, where each page is a Pane with its Toolbar. Don't stack a third coat inside it either: the frame is the window's one content coat.

ExamplesCopy Anchor Link

A fact and controls, off macOSCopy Anchor Link

meta is a quiet fact after the title, such as the Captions reader's state. The children are the window's controls, at the end of the row and out of the drag band. Off macOS the native frame owns the title bar, so the row pads like any other.

The traffic lightsCopy Anchor Link

Give the window titleBarStyle: "hiddenInset", with the traffic lights centred in the 40 px header row. On macOS the header pads 88 px (TRAFFIC_LIGHT_GUTTER_CLASS): the three lights end 74 px in, which leaves the title 14 px of air. It keeps the gutter in fullscreen too. macOS draws the lights over the header when the title bar reveals on hover, and dropping the gutter there would put them on the title.

Pass the platform you know, such as Electron's process.platform. Without one, the header reads data-platform on <html>, then the user agent. A server can't know the reader's platform, so server-rendered markup has no gutter and the client adds it as it hydrates.

ThemingCopy Anchor Link

AccessibilityCopy Anchor Link

The title is the window's h1. meta is plain text after it: if it changes while the window is open (Listening, Paused), put it in a polite live region. Each control in the header needs a name; Pin Window Button brings its own.

API referenceCopy Anchor Link

WindowHeaderCopy Anchor Link

Every header attribute, plus:

WindowFrameCopy Anchor Link

useTrafficLightGutterCopy Anchor Link

useTrafficLightGutter(platform?) returns "pl-[88px]" on macOS and "pl-3" elsewhere, for a header row of your own.