Design System

FoundationComponentsEngineeringReleases
⌘K

Breakpoints

Our system adapts from XS to XL breakpoints, ensuring consistent spacing, alignment, and rhythm from small mobile screens to large desktops. Use these grid templates to guide responsive design decisions and maintain visual balance.

Three white outlines of devices: desktop, tablet, and mobile.

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

NameAliasValue
base--
width250480px
width275600px
width300tablet834px
width350992px
width400desktop1200px
width5001440px
width6001800px

Responsive Props

All style props can handle responsive objects by default.

base and tablet are the most commonly used breakpoint aliases to define "mobile" and "desktop" layouts, but you can achieve more fine-grained control by using additional breakpoints.

Try it out

Change the screensize to see the colors update.

live

<HStack gap="400" sx={{ div: { height: 500, width: 500 } }}>
{/* Use `base` to set a baseline value */}
<Box bg={{ base: 'brandPurple.600', tablet: 'primary600' }} />
{/* The aliased breakpoints are often sufficient */}
<Box
bg={{
base: 'brandPurple.600',
tablet: 'brandGreen.600',
desktop: 'primary600',
}}
/>
{/* Use additional breakpoints for more control */}
<Box
bg={{
base: 'brandPurple.600',
width275: 'brandOrange.600',
tablet: 'brandGreen.600',
desktop: 'primary600',
width500: 'brandRed.600',
}}
/>
</HStack>

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.

Specificity

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

BreakpointScreen WidthUse Case
xs0px - 375pxSmall phones
small376px - 768pxLarge phones, small tablets
medium769px - 1024pxTablets, small laptops
large1025px - 1440pxLaptops, desktops
xl1441px+Large screens

Greater Than Breakpoints

BreakpointScreen WidthUse Case
gtXs376px+Everything above small phones
gtSmall769px+Tablets and larger
gtMedium1025px+Laptops and larger
gtLarge1441px+Large screens only

Orientation Breakpoints

BreakpointOrientationUse Case
landscapeLandscapeHorizontal device orientation
portraitPortraitVertical 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="gap-200 gap-md-600 gap-lg-800 hstack">
<div class="bg-brandRed-600 p-4"></div>
<div class="bg-brandRed-600 p-4"></div>
<div class="bg-brandRed-600 p-4"></div>
</div>

Foundations

Color tokens

Copyright © 2025 Hover Inc. All Rights Reserved.