kuito.
Get started

window

namespace

Read the current window size, insets, orientation and width class. Use these signals for behavior that depends on available space.

Read the current viewport

tsx
import { Text, window } from 'kuito';

<Text>{`${window.size.value.width} × ${window.size.value.height}`}</Text>;
<Text>{window.orientation.value === 'landscape' ? 'Wide' : 'Tall'}</Text>;
window.insets.value; // { top, left, bottom, right }

Behavior and limits

Window size is the app viewport, not necessarily the physical display. Multi-window and rotation can change it. Read signals in JSX or watch callbacks to stay current. Use CSS width-class queries for layout and SafeArea for inset padding before calculating equivalent values manually.

Continue

Read Styles for the related workflow. The API reference lists every method, option, event and return type.

Reference

Exports 8

Methods, constants and types exposed by this native namespace.

typeWindowInsetsHow far the system bars, the notch and the home indicator reach into the window.typeWindowOrientationWhether the window is taller than wide or wider than tall, for picking a layout.typeWindowSizeThe window's size, for layouts that depend on the space the app has.typeWidthClassThe window's width class, by its width: under 600, under 840, and wider.valuesizeThe window's width and height.valueinsetsThe safe area's insets from each edge of the window.valueorientationlandscape when the window is wider than it is tall.valuewidthClasscompact, medium or expanded, as Material's window size classes: the signal @media (width-class: …) follows, so a component and a stylesheet agree on it.
Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.