Breakpoints

Responsive breakpoint tokens for media queries etc.

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.

We prefer the use of Chakra's Object Syntax over the Array Syntax as Array Syntax is prone to break with changes to the tokens.

Breakpoints

Name	Alias	Value
`base`		--
`width250`		480px
`width275`		600px
`width300`	tablet	834px
`width350`		992px
`width400`	desktop	1200px
`width500`		1440px
`width600`		1800px

Responsive Props

All style props can handle responsive objects by default. Change the screensize to see the colors update.

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>
  );
}

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: 'primary', tablet: 'secondary' }}>
    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, with either the direct breakpoints or the "Greater Than" breakpoints.

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

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' }}
      $gtLarge={{ color: '#f59e0b' }}
      color="#ef4444"
    >
      Responsive Heading via props
    </Heading>
  </Stack>
);

Using the Adapt Component

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

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

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="gtMedium">
      <Stack backgroundColor="blue" flex={1} justifyContent="center">
        <Heading>Tablet Layout</Heading>
      </Stack>
    </Adapt>
  </Stack>
);

Platform-Specific Adapt

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

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

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>
);

Orientation-Based Adapt

You can also use orientation-based media queries to create different layouts for landscape and portrait modes, or combine with screen size breakpoints

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>
);

Combining Adapts

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.

live

<div class="d-flex gap-100 gap-md-500 gap-lg-800">
  <div class="bg-neutral-200 p-5"></div>
  <div class="bg-neutral-200 p-5"></div>
  <div class="bg-neutral-200 p-5"></div>
  <div class="bg-neutral-200 p-5"></div>
</div>

Foundations

Color

Design System

Settings

Breakpoints

React

Breakpoints

Responsive Props

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

Combining Adapts

Bootstrap