Breakpoints

To configure the default breakpoints used in responsive array values, add a breakpoints array to your theme. These values will be used to generate mobile-first (i.e. min-width) media queries, which can then be used to apply responsive styles.

The breakpoints array is used at breakpoints theme scale.

For example, you can write <Box fontSize={["xs", "sm"]}/> to make the font size responsive.

export const breakpoints = [
  '320px',
  '640px',
  '1024px',
  '1280px',
  '1680px'
]

EDITABLE EXAMPLE
copy
// responsive font size
<Box fontSize={["xs", "sm", "md", "lg"]}>Breakpoints</Box>
// responsive font size
<Box fontSize={["xs", "sm", "md", "lg"]}>Breakpoints</Box>