Breakpoints

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.

Name	Alias	Value
base		—
width100		320px
width200	mobile	375px
width250		480px
width275		600px
width300	tablet	834px
width350		992px
width400	desktop	1152px
width500		1440px

Responsive Props

All style props are responsive by default.

Object Style

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

Array Style

Prefer Object Style
Using arrays for responsive props is discouraged as it is hard to read and requires every breakpoint in the desired responsive range to be specified.

Interstitial breakpoints must be filled with null.

live

function Example() {
  const Responsive = props => <Panel as={Center} w="500" h="200" {...props} />;
  return (
    <Responsive
      bg={[
        'primary.600', // base
        null, // width100
        null, // width200
        'brandOrange.500', // mobile
        null, // width250
        null, // width300
        null, // tablet
        'brandGreen.500', // width350
        'brandBrown.500', // desktop+
      ]}
    />
  );
}

It does allow you to do something silly like this if you need to, though...

live

function Example() {
  const theme = useTheme();
  const Responsive = props => (
    <Panel as={Center} display="inline-block" {...props} />
  );
  return (
    <Responsive
      bg="primary.600"
      paddingX={Object.keys(theme.space)
        .map(size => parseInt(size))
        .filter(size => size % 100 === 0 && size >= 100)
        .sort((a, b) => a - b)
        .map(String)}
    >
      <Icon color="neutral.0" icon={iMaximize2} />
    </Responsive>
  );
}

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: 'brand', tablet: 'solid' }}>Badge Variant</Badge>
</Stack>

Blueprint

Settings

Breakpoints

Responsive Props

Object Style

Array Style

Prefer Object Style

Responsive Presets

Note