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.
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
.
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 aStack
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.