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'
]

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


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

Configuration Reference

Except for breakpoints, colors, and spacing, all keys in the theme object map to one of the core themes. All keys can be replaced or extended.

For more information, see the complete properties reference table.