Detecting Breakpoints in React Using Chakra UI

The project I'm currently working on makes heavy use of Chakra UI, an open‑source library of reusable React components built using the Emotion CSS-in-JS library and the styled‑system design system.

It is fair to say that it has been a fairly steep learning curve, but one of the things I've come to be very impressed with is the useBreakpointValue hook in Chakra UI v1.8. When combined with ChakraProvider, it allows the application to respond and adapt to different screen sizes very easily.

The hook accepts a responsive values object and returns the value for the current breakpoint. It responds when the window size changes.

To use the useBreakpointValue hook, you first need to install the @chakra-ui/react package, after which you can import the hook into your component like this:

import { useBreakpointValue } from '@chakra-ui/react'

And use it like this:

const screenSize = useBreakpointValue({  base: 'small',  md: 'medium',  lg: 'large',  xl: 'extra large',});

The responsive object uses mobile‑first breakpoint keys. In Chakra UI v1.8, the default keys are base, sm, md, lg, xl, or 2xl. By default, these correspond to:

• base: 0px and up
• sm: 480px and up
• md: 768px and up
• lg: 992px and up
• xl: 1280px and up
• 2xl: 1536px and up

A single responsive values object can express the result for each breakpoint without chaining several hook calls:

const screenSize = useBreakpointValue({  base: 'small',  md: 'medium',  lg: 'large',  xl: 'extra large',});return <p>The screen is {screenSize}!</p>;

Customising the Default Breakpoints

It's also straightforward to customise the breakpoints used by the useBreakpointValue hook. For Chakra UI v1.8, define them with extendTheme and pass the resulting theme to ChakraProvider from @chakra-ui/react.

For example:

import { ChakraProvider, extendTheme } from '@chakra-ui/react';const theme = extendTheme({  breakpoints: {    sm: '400px',    md: '600px',    lg: '950px',    xl: '1100px',    '2xl': '1400px',  },});function App() {  return (    <ChakraProvider theme={theme}>      {/* Your application components go here */}    </ChakraProvider>  );}

And that's it! With the useBreakpointValue hook, you can easily create responsive layouts in your Chakra UI application by detecting screen sizes and adapting the content accordingly.

Obviously, there are also plenty of other ways to achieve this if you don't happen to have inherited a project that's already using Chakra!

Check the Chakra Version First

This article came from a project that was already using Chakra UI, so the right answer was to use the tools the codebase had standardised on. Before copying the pattern, check the Chakra version in your own project because the responsive hooks and theme setup have changed across major releases.

For simple style changes, CSS‑first responsive props are usually cleaner than branching React logic. Reach for breakpoint‑aware JavaScript only when the component genuinely needs to render different behaviour, data or structure at different sizes.

Server Rendering Caveat

If the app server‑renders, be careful with breakpoint logic that only resolves in the browser. A mismatch between the server output and the first client render can create layout shifts or hydration warnings. Prefer a stable default and then enhance after the breakpoint value is known.