Window
The native window's anatomy — a sidebar under the traffic lights, a unified toolbar, opaque content.
The sidebar runs under the lights and shows the desktop through it; the content stays opaque.
Window is the native frame: a sidebar under the traffic lights, a unified
toolbar, opaque content; macOS vibrancy shows the desktop behind
(/theming#materials).
<Window
sidebar={<SourceList label="Mailboxes" sections={sections} value={place} onValueChange={setPlace} />}
toolbar={<WindowToolbar title="Inbox" actions={<SearchInput />} />}
inspector={<Details />}
>
<MessageList />
</Window>Open it with nativeWindowOptions; Windows and Linux keep the system bar.
render(<App />, { title: "Mail", ...nativeWindowOptions(theme, currentPlatform) });| Prop | Type | Default | Consequence |
|---|---|---|---|
sidebar | ReactNode | none | runs under the lights; without one the toolbar reserves their 90-point box |
sidebarWidth | number | 220 | the starting width; drag the sidebar's hairline or focus it and use ←/→/Home/End |
sidebarMinWidth / sidebarMaxWidth | number | 180 / 360 | the drag's bounds; equal bounds fix the width |
onSidebarWidthChange | (width) => void | none | reports each new width, to persist it |
toolbar | ReactNode | none | usually a WindowToolbar |
toolbarStyle | "unified" | "compact" | "unified" | 52 or 38 points tall |
inspector | ReactNode | none | a trailing opaque pane, inspectorWidth wide (260) |
platform | PlatformName | the host's | where the lights float; none in a terminal |
Source list
SourceList is the sidebar's list: 28-point rows, titled sections, one tab
stop. ↑/↓/Home/End move the choice; typing jumps to a label.
- No hover wash; the chosen row is emphasized only while the list holds focus.
- A
collapsiblesection folds from its header;defaultCollapsedstarts it folded.
Appearance
The runtime reports no accent colour, Light/Dark or Reduce Transparency, so
@gpuixui/shell reads them from defaults; watchAppearance emits changes
(polled every two seconds) and appearanceOverrides edits the theme.
const app = watchAppearance.pipe(
Stream.runForEach((appearance) =>
Effect.sync(() =>
setTheme(extendTheme(getTheme(appearance.mode), appearanceOverrides(appearance, base))),
),
),
Effect.provide(NodeServices.layer),
);- A sandboxed
.appmay be refused the global domain:AppearanceReadError.
Edit this page on GitHubapps/docs/content/docs/platform/native-window.mdx