Once UI handles responsive layout through breakpoint props on components — not CSS media queries.
Breakpoint keys
Override layout at breakpoints using props on the same component:
Key
Typical viewport
`xl`
Largest
`l`
Desktop
`m`
Tablet
`s`
Mobile landscape
`xs`
Mobile portrait
Larger breakpoint styles cascade down. Set the desktop layout as defaults, then override at s or m.
Stack on mobile
The most common pattern — horizontal row that becomes vertical:Desktop: side by side. Mobile (s): stacked.
Responsive grid
Reduce columns as viewport shrinks:
Responsive spacing
Tighten gaps on smaller screens:
Responsive buttons
Stack CTA buttons on mobile:
When layout needs a direction flip only
If the only responsive change is direction, use Row with breakpoint override — no need for a separate layout component:
Write this / not this
✅ Once UI way
❌ Common mistake
`s={{ direction: "column" }}`
CSS `@media` queries
`s={{ columns: "1" }}` on Grid
Separate mobile component
`s={{ gap: "16" }}`
Inline `style` overrides
Desktop layout as default props
Mobile-first with `xs` only
Server vs client
Breakpoint props require client-side class resolution. Once UI's Row, Column, and Grid handle this automatically — they switch to client rendering when breakpoint props are present.
Check yourself
No CSS media queries for layout
Desktop layout set as default props
Mobile overrides use s or m keys
Buttons and panels stack with s={{ direction: "column" }}
