Responsive layouts

Use the media prop for layout and style changes. Use responsive hooks when the rendered behavior or content must change. Configure both through ResponsiveProvider.

Adapt a layout with media

import React from 'react';
import { Horizontal, Vertical, Text } from 'app-studio';
import { Button } from '@app-studio/components';

export function ResponsiveActions() {
  return (
    <Horizontal
      gap={24}
      padding={24}
      alignItems="center"
      justifyContent="space-between"
      media={{
        mobile: { flexDirection: 'column', alignItems: 'stretch', padding: 16 },
      }}
    >
      <Vertical gap={8}>
        <Text fontSize={22} fontWeight="bold">
          Ready for any screen
        </Text>
        <Text>Resize the viewport to change the layout.</Text>
      </Vertical>
      <Button>Continue</Button>
    </Horizontal>
  );
}

Named devices such as mobile depend on your provider configuration. They are not independent magic widths. On web, style overrides use media queries rather than requiring a hook-driven render.

Configure breakpoints

The shipped defaults use xs: 0, sm: 340, md: 560, lg: 1080, and xl: 1300. You can supply explicit project breakpoints and device groups:

const breakpoints = { xs: 0, sm: 480, md: 768, lg: 1024, xl: 1440 };
const devices = {
  mobile: ['xs', 'sm'],
  tablet: ['md'],
  desktop: ['lg', 'xl'],
};
// Pass both objects to ResponsiveProvider near the root.

Keep this configuration shared across screens. Changing it changes every named-device rule beneath that provider.

When to use a hook

useResponsive() exposes helpers such as on('mobile') for device-aware logic. Hook-driven decisions re-render when the responsive state changes. Prefer media for purely visual changes and avoid hiding essential content on small screens.

Native and constrained layouts

Native responsive state follows window dimensions, including rotation and split-screen. CSS Grid does not exist on native: use a fixed integer column count for the supported mapping or explicit Flexbox layouts.

A browser-window breakpoint is not the same as the width of a narrow panel. The framework's responsive reference also covers container-scoped responsiveness.

Verify the result

Test a narrow phone, a tablet-sized viewport, a wide screen, and enlarged text. Check focus visibility and code overflow as well as visual alignment.