Responsive

nxds is built for mobile and desktop equally. Write the mobile styles first, without a prefix, then add styles for wider screens with nx:sm:, nx:md:, nx:lg: and up. Breakpoints are in rem, so a user who enlarges their browser font size gets the roomier layout at a narrower window width.

Breakpoints

Components are tuned at two widths: about 390px for mobile and about 1280px (xl) for desktop. Narrow, Standard and Wide are labels for review, not classes.

Class	rem / px	Display class	Design target
(no prefix)	base / <640px	Narrow	★ mobile foundation — style here first
nx:sm:	40rem / 640px	Narrow	★ first-class
nx:md:	48rem / 768px	Narrow	★ first-class
nx:lg:	64rem / 1024px	Standard	★ first-class — desktop floor
nx:xl:	80rem / 1280px	Standard	★ first-class — desktop reference
nx:2xl:	96rem / 1536px	Wide	extra breathing room

Show / Hide primitives

Use <Show> and <Hide> to show content at some widths only. Pass one prop: above or below for the viewport, or containerAbove or containerBelow for the nearest @container.

The children always render. Only their visibility changes.

The viewport and container scales share names but not sizes. Viewport md is 48rem and container md is 28rem.

// Viewport axis — page-shell decision
<Show above="lg">
  <Sidebar />
</Show>

// Container axis — component adapts to its parent
<Hide containerBelow="md">
  <Actions />
</Hide>

Which mechanism

Inside a component, use @container. The component then adapts to its parent, so it looks right in a sidebar or a full-width section. Use viewport prefixes for the page layout, and for overlays that cover the screen, like Dialog.

Mechanism	Use case
@container query	Component adapts to its parent’s width
nx:lg: viewport prefix	Page-shell decisions — nav collapse, side-panel hide
clamp()	Continuous adaptation of size — type, padding
svh / lvh / dvh	Mobile browser-chrome accommodation