Responsive
Nexus is designed mobile-first and desktop-first — Narrow (mobile) and Standard (desktop) are both first-class targets, neither a degradation of the other. Author mobile-first: base styles are the mobile case, and min-width prefixes layer on the wider tiers. Wide (≥1536px) gets extra breathing room. Breakpoints are rem-based, so they track the user’s font-size preference — raise the base font and each breakpoint fires at a narrower viewport, dropping the layout to a roomier tier as the text enlarges.
Breakpoints
Five Tailwind classes plus the unprefixed base, mapped onto the Narrow / Standard / Wide labels. Components are tuned against two reference widths — mobile ~390px and desktop ~1280px (xl).
| 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
The declarative <Show> / <Hide> primitives from @nexus_ds/react express responsive visibility. Provide exactly one axis: above / below for the viewport, or containerAbove / containerBelow for the nearest @container. They toggle display: contents ↔ display: none, so children always render — only visibility changes. Note the two breakpoint scales share names but differ: viewport md = 48rem, container md = 28rem, so above="md" and containerAbove="md" do not fire at the same width.
// Viewport axis — page-shell decision
<Show above="lg">
<Sidebar />
</Show>
// Container axis — component adapts to its parent
<Hide containerBelow="md">
<Actions />
</Hide>Which mechanism
Components prefer @container — they adapt to their parent’s width, so they render consistently in a sidebar or a hero. Viewport prefixes are reserved for page-shell decisions and full-viewport overlays (Dialog), whose trigger is position relative to the viewport.
| 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 |