Screen

Render one implementation per viewport class inside consistent page chrome.

Screen is a page-level wrapper that renders one implementation per viewport class inside consistent page chrome. Instead of bundling responsive branches into one tree, a screen passes desktop, tablet, and phone components; missing variants fall back to the closest supplied one.

Phone variant

Resize the window to switch variants.

Import#

typescript

import { Screen } from "@reactberry/system/blocks";

Usage#

typescript

import { Screen } from "@reactberry/system/blocks";

import ProjectDesktop from "./project-desktop";
import ProjectPhone from "./project-phone";

export default function ProjectScreen({ projectId }: { projectId: string }) {
  return <Screen preset="framed" desktop={ProjectDesktop} phone={ProjectPhone} pass={{ projectId }} />;
}

Examples#

Forwarding props#

pass is spread onto whichever variant renders, so every variant receives the same data.

Website redesign

12 open

Three variants#

Supply tablet when the layout between sm and md differs from both desktop and phone.

Phone: one column

The examples use preset="clean", insets={false} and minHeight="auto" so the screen stays inside the preview. By default, framed pins its gutter to the viewport height on desktop, and tablet and phone set minHeight="100vh".

API#

Screen#

Prop	Type	Default	Description
`preset`	`"page""framed""clean"`	—	Chrome around the content: `framed` (default), `page` or `clean`.
`insets`	`boolean`	—	Room reserved for the fixed mobile chrome (top bar, bottom toolbar) and the device safe areas. On by default in the phone and tablet shells, since the chrome always overlays them; desktop has none and ignores it. Set to false for screens that deliberately paint under the chrome, e.g. a hero image.
`children`	`ReactNode`	—	Rendered when no viewport variant is supplied.
`desktop`	`ScreenVariant`	—	Rendered at `md` (64rem) and above. Falls back to `tablet`, then `phone`.
`tablet`	`ScreenVariant`	—	Rendered from `sm` (48rem) up to `md`. Falls back to `desktop`, then `phone`.
`phone`	`ScreenVariant`	—	Rendered below `sm`. Falls back to `tablet`, then `desktop`.
`pass`	`Record<string, unknown>`	—	Props forwarded to whichever variant is rendered.

All other Box props are applied to the surface, the element the content renders into.

Presets:

framed (default) — gutter plus card surface (skin="card", shape="roundedLarge", $shadow="xsmall"). On desktop the gutter is pinned to the viewport (height="100dvh", overflow="hidden") and the card scrolls inside it.
page — centred page column; chrome is read from the theme's container. No gutter.
clean — no gutter or surface, for screens that own their shell.

ScreenDesktop, ScreenTablet, ScreenPhone#

The shells Screen picks between, exported for rendering a specific one directly. They take the same props as Screen.

Notes#

Screen reads the viewport from useBreakpoint, so it must render inside BreakpointProvider (exported from @reactberry/system), typically mounted once in the root layout.
Breakpoints: desktop from md (64rem), tablet from sm (48rem) up to md, phone below sm.
Variants mount exclusively. State shared between them must live in a hook above the Screen, since switching viewport unmounts the previous variant.
On tablet and phone, Screen sets minHeight="100vh" on the surface; pass minHeight to override it.
With insets, the tablet and phone shells replace the vertical padding with pt / pb that clear the mobile top bar, bottom toolbar and safe areas. It is applied to the gutter for framed and to the surface for the other presets.
The inset constants (SAFE_TOP, SAFE_BOTTOM, MOBILE_TOP_BAR, MOBILE_BOTTOM_BAR, MOBILE_TOP_INSET, MOBILE_BOTTOM_INSET) are exported from the component module but not from @reactberry/system/blocks. The ScreenProps, ScreenPreset, ScreenVariant and ScreenDevice types are.