Responsive
The desktop-first responsive system: the parent provides the bounds (FILL and HUG components, Container steps, Row spans, Grid tiles), then three mechanisms (intrinsic sizing, container measurement, viewport breakpoints), a phone/tablet/desktop form-factor tier, and the Row-stacks primitive.
Breakpoints
Canvas is desktop-first. The base value is the desktop case; a breakpoint entry (sm, md, lg, xl, 2xl) applies at that width and below. useResponsive resolves a value map, useBreakpoint returns the active bucket, and useFormFactor collapses it to phone / tablet / desktop (phone at or below sm, tablet at or below lg, desktop above). The tier is the window width on every platform: a narrow or zoomed desktop window is the phone or tablet tier, and a landscape phone is usually the tablet tier; there is no separate desktop-OS tier. An unknown viewport (SSR, the pre-layout first frame) resolves to base, the desktop variant; SSR apps that know better pass ThemeProvider's ssrBreakpoint.
The parent provides the bounds
A component never dictates its own width. It is FILL (a field, a card, a table, a chart: width 100% plus flexShrink so it fills a Column and shares a Row) or HUG (a button, a badge, a chip: its content's width), and the nearest layout container provides the bounds from one width scale. Container conforms to its parent by default and caps at a named step (xxxs 192 through page 1280) when asked; a Row child's span is its width in twelfths; Grid fits equal tiles. The fields, Field, Form, Button, and ButtonGroup can also name a step of their own (the measure axis: xs, lg, start), which is that same cap moved onto the component. That is Bootstrap's contract in React Native terms, and the reason no component takes a width or maxWidth in its style.
FILL within a sm Container
HUG badge
HUG badge
One grid cell
Another grid cell
Choosing a mechanism
Three official layers, in order of preference. Rule of thumb: viewport for the shell, container for the components, intrinsic wherever possible.
1. Intrinsic sizing
Use FILL or HUG with bounds from a Container step, Row span, or Grid cell. This works on the first frame and server.
2. Container measurement
Grid and Row stacks react to their own width; a component may live in a narrow desktop panel.
3. Viewport breakpoints
Reserve viewport hooks for window-level chrome: the Sidebar or FilterPanel drawer modes, Popover's sheet at the phone tier, and app shells.
Pointer capability
usePointerCoarse and useHoverCapable express input capability separately from viewport size.
Sidebar - drawer ↔ fixed
The kit Sidebar's `responsive` prop does this: a fixed accordion rail on the desktop base, and at lg (1024px) and below a start-edge drill-down drawer opened by the hamburger button. Above lg, the fixed panel stays.
Overview
Draft preserved on resize
Layout primitives: Grid and Row stacks
Equal-width tiles belong to Grid: minTileWidth sets the floor (default 240), columns caps the desktop count, and the measured container decides how many fit, exactly like the auto-fit demo below. Content-sized rows that should stack at narrow widths belong to Row stacks (a toolbar, a label beside its actions); when stacked, the Row is the Column with the same props.
Search runs
Active only
Build API
Write guide
Review release
Ship update
Wide tile spans two cells when room is available.
Regular tile
What's behind the scenes
Specific responsive treatments worth noting beyond just stacking grids.
DataTable
Measures its own container. Narrow tables pan or use the chosen stacked treatment.
Navbar
Its links collapse into the platform menu when its own container narrows.
Overlays
Anchored cards clamp their position and width inside their overlay outlet. At the phone tier Popover presents a sheet on the window's bottom edge instead.
Calendar
Month cells respond to available space without a window breakpoint.
Density
compact and comfortable are independent of viewport size.
Narrow modes
Sidebar and FilterPanel can become drawers; Steps stacks and responsive vertical Tabs use their own narrow treatments.
Try it yourself
Resize the preview and edit a field. Grid tiles reflow and Row stacks changes arrangement while the same controls remain mounted, preserving values and selection.