Breakpoints

React

A set of breakpoint presets are available to build responsive interfaces. Using Chakra's Responsive Styles feature, it's possible to generate media queries automatically by simply passing a responsive value to any prop that supports responsive styles.

Name	Alias	Value
base		—
width100		320px
width200	mobile	375px
width250		480px
width275		600px
width300	tablet	834px
width350		992px
width400	desktop	1200px
width500		1440px
width600		1800px

Responsive Props

All style props are responsive by default.

Object Style

live

function Example() {
  const Responsive = props => <Panel as={Center} w="500" h="200" {...props} />;
  return (
    <Stack direction="row">
      {/* Use `base` to set a baseline value */}
      <Responsive bg={{ base: 'primary.600', desktop: 'brandGreen.500' }} />
      {/* The aliased breakpoints are often sufficient */}
      <Responsive
        bg={{
          base: 'primary.600',
          tablet: 'brandOrange.500',
          desktop: 'brandGreen.500',
        }}
      />
      {/* Use all breakpoints for more control */}
      <Responsive
        bg={{
          base: 'primary.600',
          width100: 'brandTan.600',
          mobile: 'brandNavy.500',
          tablet: 'brandOrange.500',
          desktop: 'brandGreen.500',
          width500: 'brandBrown.500',
        }}
      />
    </Stack>
  );
}

Array Style

Prefer Object Style
Using arrays for responsive props is discouraged as it is hard to read and requires every breakpoint in the desired responsive range to be specified.

Interstitial breakpoints must be filled with null.

live

function Example() {
  const Responsive = props => <Panel as={Center} w="500" h="200" {...props} />;
  return (
    <Responsive
      bg={[
        'primary.600', // base
        null, // width100
        null, // width200
        'brandOrange.500', // mobile
        null, // width250
        null, // width300
        null, // tablet
        'brandGreen.500', // width350
        'brandBrown.500', // desktop+
      ]}
    />
  );
}

It does allow you to do something silly like this if you need to, though...

live

function Example() {
  const theme = useTheme();
  const Responsive = props => (
    <Panel as={Center} display="inline-block" {...props} />
  );
  return (
    <Responsive
      bg="primary.600"
      paddingX={Object.keys(theme.space)
        .map(size => parseInt(size))
        .filter(size => size % 100 === 0 && size >= 100)
        .sort((a, b) => a - b)
        .map(String)}
    >
      <Icon color="neutral.0" icon={iconExpand} />
    </Responsive>
  );
}

Responsive Presets

The size and variant theme presets support responsive values as well. If you need to make something like colorScheme responsive, you'll need to use useBreakpointValue.

Note
Because size and variant presets are applied with media queries, you may need to append !important in order to override size and styles that are applied responsively.

live

<Stack direction="column" alignItems="start" spacing="500">
  <Heading
    size={{ base: 400, tablet: 500, desktop: 600 }}
    marginBottom="0 !important"
  >
    Heading Size
  </Heading>
  <Button size={{ base: 'small', tablet: 'medium', desktop: 'large' }}>
    Button Size
  </Button>
  <Badge variant={{ base: 'brand', tablet: 'solid' }}>Badge Variant</Badge>
</Stack>

React Native

React Native breakpoints are implemented using Tamagui's media query system and provide responsive behavior for mobile and tablet devices. The breakpoints are based on screen width and automatically adapt content based on device size.

Available Breakpoints

Breakpoint	Screen Width	Use Case
`xs`	0px - 375px	Small phones
`small`	376px - 768px	Large phones, small tablets
`medium`	769px - 1024px	Tablets, small laptops
`large`	1025px - 1440px	Laptops, desktops
`xl`	1441px+	Large screens

Greater Than Breakpoints

Breakpoint	Screen Width	Use Case
`gtXs`	376px+	Everything above small phones
`gtSmall`	769px+	Tablets and larger
`gtMedium`	1025px+	Laptops and larger
`gtLarge`	1441px+	Large screens only

Orientation Breakpoints

Breakpoint	Orientation	Use Case
`landscape`	Landscape	Horizontal device orientation
`portrait`	Portrait	Vertical device orientation

Using Responsive Props

Components support responsive styling using the $ prefix for breakpoint-specific props:

import { Stack, Text } from '@hoverinc/design-system-react-native';
const MyComponent = () => (
  <Stack
    padding="$400"
    $small={{ padding: '$200' }}
    $medium={{ padding: '$600' }}
  >
    <Text>Responsive content</Text>
  </Stack>
);

Inline Responsive Properties

Many primitives support responsive properties directly on individual style props:

import { Heading, Stack } from '@hoverinc/design-system-react-native';
const ResponsiveHeading = () => (
  <Stack alignItems="center" flex={1} justifyContent="center">
    <Heading
      $medium={{ color: '#3b82f6' }}
      $small={{ color: '#10b981' }}
      color="#ef4444"
    >
      Responsive Heading via props
    </Heading>
  </Stack>
);

You can also use "greater than" breakpoints with responsive props:

import { Heading, Stack } from '@hoverinc/design-system-react-native';
const GreaterThanHeading = () => (
  <Stack alignItems="center" flex={1} justifyContent="center">
    <Heading
      $gtSmall={{ color: '#8b5cf6' }}
      $gtXs={{ color: '#f59e0b' }}
      color="#ef4444"
    >
      Greater Than Responsive Heading
    </Heading>
  </Stack>
);

This approach allows for fine-grained control over individual properties across different breakpoints without needing to wrap components in Adapt.

Using the Adapt Component

For more complex responsive behavior, use the Adapt component to conditionally render different content based on breakpoints:

Important: When using Adapt, the code must be wrapped by a Stack component to ensure proper layout and rendering behavior.

import { Adapt, Stack, Heading } from '@hoverinc/design-system-react-native';
const ResponsiveLayout = () => (
  <Stack flex={1}>
    <Adapt when="xs">
      <Stack backgroundColor="red" flex={1} justifyContent="center">
        <Heading>Mobile Layout</Heading>
      </Stack>
    </Adapt>
    <Adapt when="medium">
      <Stack backgroundColor="blue" flex={1} justifyContent="center">
        <Heading>Tablet Layout</Heading>
      </Stack>
    </Adapt>
  </Stack>
);

You can also use the "greater than" breakpoints for broader targeting:

import { Adapt, Stack, Heading } from '@hoverinc/design-system-react-native';
const GreaterThanLayout = () => (
  <Stack flex={1}>
    <Adapt when="xs">
      <Stack backgroundColor="red" flex={1} justifyContent="center">
        <Heading>Small Phones Only</Heading>
      </Stack>
    </Adapt>
    <Adapt when="gtXs">
      <Stack backgroundColor="green" flex={1} justifyContent="center">
        <Heading>Everything Above Small Phones</Heading>
      </Stack>
    </Adapt>
    <Adapt when="gtSmall">
      <Stack backgroundColor="blue" flex={1} justifyContent="center">
        <Heading>Tablets and Larger</Heading>
      </Stack>
    </Adapt>
  </Stack>
);

The Adapt component automatically shows/hides content based on the current screen size, making it perfect for creating different layouts for different device types.

Platform-Specific Adapt

The Adapt component can also target specific platforms using the platform prop:

import { Adapt, Stack, Heading } from '@hoverinc/design-system-react-native';
const PlatformSpecificLayout = () => (
  <Stack flex={1}>
    <Adapt platform="touch" when="small">
      <Stack backgroundColor="blue" flex={1} justifyContent="center">
        <Heading>Touch Device - Small Screen</Heading>
      </Stack>
    </Adapt>
    <Adapt platform="android" when="large">
      <Stack backgroundColor="green" flex={1} justifyContent="center">
        <Heading>Android - Large Screen</Heading>
      </Stack>
    </Adapt>
  </Stack>
);

This allows you to create different experiences for touch devices vs. android platforms, in addition to responsive breakpoint behavior.

Orientation-Based Adapt

You can also use orientation-based media queries to create different layouts for landscape and portrait modes:

import { Adapt, Stack, Heading } from '@hoverinc/design-system-react-native';
const OrientationLayout = () => (
  <Stack flex={1}>
    <Adapt when="portrait">
      <Stack backgroundColor="blue" flex={1} justifyContent="center">
        <Heading color="$textPrimaryInvert">Portrait Mode</Heading>
      </Stack>
    </Adapt>
    <Adapt when="landscape">
      <Stack backgroundColor="green" flex={1} justifyContent="center">
        <Heading color="$textPrimaryInvert">Landscape Mode</Heading>
      </Stack>
    </Adapt>
  </Stack>
);

You can also combine orientation with screen size breakpoints:

import { Adapt, Stack, Heading } from '@hoverinc/design-system-react-native';
const CombinedLayout = () => (
  <Stack flex={1}>
    <Adapt when="xs" platform="portrait">
      <Stack backgroundColor="red" flex={1} justifyContent="center">
        <Heading color="$textPrimaryInvert">Small Phone Portrait</Heading>
      </Stack>
    </Adapt>
    <Adapt when="landscape">
      <Stack backgroundColor="purple" flex={1} justifyContent="center">
        <Heading color="$textPrimaryInvert">Any Landscape</Heading>
      </Stack>
    </Adapt>
  </Stack>
);

Bootstrap

Bootstrap incorporates responsive breakpoints into its various utility classes. See the spacing notation for an example.

Default Bootstrap Breakpoints
The default Bootstrap breakpoints such as sm, md, lg, etc. are still supported, but they are deprecated and mapped to the closest breakpoint in the system tokens. They will be removed entirely in the next major release.

live

<div class="example-space d-flex gap-100 gap-tablet-500 gap-desktop-800">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Design System

Settings

Breakpoints

React

Responsive Props

Object Style

Array Style

Prefer Object Style

Responsive Presets

Note

React Native

Available Breakpoints

Greater Than Breakpoints

Orientation Breakpoints

Using Responsive Props

Inline Responsive Properties

Using the Adapt Component

Platform-Specific Adapt

Orientation-Based Adapt

Bootstrap

Default Bootstrap Breakpoints