Responsive

Breakpoints

Breakpoint	Min width	Media query
`$xxs`	480px	`(min-width: 480px)`
`$xs`	576px	`(min-width: 576px)`
`$sm`	768px	`(min-width: 768px)`
`$md`	992px	`(min-width: 992px)`
`$lg`	1200px	`(min-width: 1200px)`
`$xl`	1408px	`(min-width: 1408px)`
`$xxl`	1920px	`(min-width: 1920px)`

They come from the config, so createTheme({ breakpoints }) rebuilds the media queries and every consumer follows.

Breakpoint props

Any style prop accepts an object keyed by breakpoint:

<Box p={{ xxs: "$sm", md: "$lg" }} flexDirection={{ xxs: "column", sm: "row" }} />
<SimpleGrid cols={{ xxs: 1, sm: 2, lg: 4 }} gap="$md" />

Values are min-width based and cascade upwards, so xxs is your base.

In JavaScript

import { useMedia } from "@knitui/core";

function Nav() {
  const media = useMedia();
  return media.sm ? <Sidebar /> : <Drawer />;
}

useMedia is reactive on both platforms — on native it tracks the window dimensions, on the web it uses matchMedia.

SSR-safe queries

Server rendering has no viewport, so a naive matchMedia read produces a hydration mismatch. @knitui/mediaquery exists for that case:

import { MediaQueryProvider, useMediaQuery } from "@knitui/mediaquery";

// seed from the request's user agent so the first paint is close
<MediaQueryProvider userAgent={headers().get("user-agent")}>

const isWide = useMediaQuery("(min-width: 992px)");

On native it parses the query and answers from Dimensions, so the same call works on device.

Viewport and element size

import { useElementSize, useViewportSize } from "@knitui/hooks";

useViewportSize — window dimensions, both platforms.
useElementSize — an element's measured box.

Orientation and platform

import { useOs } from "@knitui/hooks";

const os = useOs(); // "ios" | "android" | "macos" | "windows" | "linux" | "web" | undefined

Use it for genuine platform affordances (keyboard hints, store links), not for layout — layout should follow size, not OS.