In Once UI, responsive layout is an object on the prop — not a media query. Pass xl, l, m, s, or xs overrides; they cascade downward. Same tokens at every width; hide, stack, or tighten without writing CSS.
Once UI does not ask you to write a media query for every layout tweak. Responsive behaviour sits on the same props you already use — direction, gap, padding, hide, columns — as an object keyed by breakpoint.That is the whole model. The rest of this post is how to use it without inventing CSS.
the cascade
Breakpoints run largest to smallest: xl → l → m → s → xs. A value set at a larger size applies to every smaller size until a smaller key overrides it.Defaults under LayoutProvider are roughly: xs 480, s 768, m 1024, l 1440, xl 1920. You rarely need the numbers. You need the cascade.
Exact hide recipes vary by component; the idea does not. Decide what the small surface should carry, then override upward or downward — do not keep both layouts painted and hope CSS wins.
direction when Flex earns it
Prefer Row and Column for fixed direction. Reach for Flex when the axis itself must flip at a breakpoint — that is the one case a preset cannot express cleanly:
<Flex
direction="row"
gap="32"
fillWidth
m={{ direction: "column", gap: "16" }}
>
<Column fillWidth>{/* left */}</Column>
<Column fillWidth>{/* right */}</Column>
</Flex>
Card, Dialog, and Mask inherit the same Flex breakpoint props, so a card can tighten padding or change direction without a wrapper invented only for CSS.
Grid: columns, not direction
Grid does not take direction / horizontal / vertical. Override (and spacing) instead:
Same cascade. Same tokens. The prop that defines the layout is the one you override.
What not to do
Do not write a media query to change gap or padding on a Once UI layout. Put the override on the prop.
Do not duplicate a whole tree for "mobile" and "desktop" when a direction or hide override would do.
Do not invent pixel breakpoints in style. Use the keys the provider already owns.
Do not assume every prop is responsive on every component — Grid refuses Flex-only keys; check the type if TypeScript complains.
The longer reference lives in the breakpoints docs. This post is the decision tree: overrides on the prop, cascade downward, hide or stack instead of a second stylesheet.
