Window

The root of every Tarve app: a native OS window with size, position and theme.

WindowProps packages/core/src/components/window.ts:23 ↗

Import

import { Window } from "@tarve/core";

Usage

Window.tsx

import { Column, Text, Window, createApp, darkTheme } from "@tarve/core";

function App() {
  return (
    <Window title="Notes" width={720} height={480} minWidth={480} minHeight={320} position="center" theme={darkTheme}>
      <Column flex={1} padding={24} gap={8}>
        <Text size={24} weight={700}>Hello from Tarve</Text>
        <Text>This is a native window. No browser involved.</Text>
      </Column>
    </Window>
  );
}

const app = createApp(App);
await app.ready;
await app.closed;

Props

Prop	Type	Default
`height`	`number`	—
`minHeight`	`number`	—
`minWidth`	`number`	—
`onCloseRequest`	`(event: WindowCloseRequestEvent) => void`	—
`position`	`WindowPosition`	—
`resizable`	`boolean`	—
`theme`	`ThemeDefinition`	—
`title`	`string`	—
`width`	`number`	—

Inherited from ViewProps 11 props

Prop	Type	Default
`align`	`Style["align"]`	—
`dismissOnOutside`	`boolean`	—
`dragRegion`	`boolean`	—
`flex`	`number`	—
`focusable`	`boolean`	—
`gap`	`number`	—
`justify`	`Style["justify"]`	—
`onOutsideClick`	`() => void`	—
`padding`	`Style["padding"]`	—
`portal`	`boolean`	—
`windowAction`	`"minimize" \| "toggleMaximize" \| "close"`	—

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

WindowCloseRequestEvent

interface WindowCloseRequestEvent {
  readonly defaultPrevented: boolean;
  preventDefault(): void;
}

WindowPosition

type WindowPosition = WindowPositionPreset | { x: number; y: number };