Using Chakra UI's useBreakpointValue Hook for Responsive Component Styles

Quick answer: get a value that changes with the viewport

The useBreakpointValue hook lets you return a different value (like width, font size, or spacing) depending on the current breakpoint defined in your Chakra theme. You write one object that maps breakpoint names to values, and the hook picks the appropriate one as the window size changes.

Worked example

import { useBreakpointValue, ChakraProvider, extendTheme, Box } from '@chakra-ui/react';

// 1. Define breakpoints in the theme (optional if you keep the defaults)
const theme = extendTheme({
  breakpoints: ['sm', 'md', 'lg'],
});

function ResponsiveBox() {
  // 2. Pass an object where keys match breakpoint names
  const width = useBreakpointValue({
    base: '100px',   // < sm
    sm: '200px',     // >= sm && < md
    md: '300px',     // >= md && < lg
    lg: '400px',     // >= lg
  });

  // 3. Use the returned value in inline style or a Chakra prop
  return ;
}

// App wrapper
function App() {
  return (
    
      
    
  );
}
export default App;

How the hook works

• When the component mounts, useBreakpointValue reads the theme’s breakpoints array.
• It evaluates the supplied object from the smallest breakpoint upward and returns the first value whose breakpoint matches the current viewport width.
• If no breakpoint matches, it falls back to the base key (the value with no breakpoint prefix).
• The hook subscribes to window.matchMedia internally, so a change in viewport triggers a re‑render with the new value.

Limits and what the hook does not do

• It only understands breakpoints that exist in the theme; passing a key that isn’t defined will cause the hook to skip it and may return base or undefined.
• There is no built‑in interpolation between breakpoints; you cannot ask for a value that smoothly transitions from 200px to 300px as the window grows.
• The hook does not replace CSS grid or flexbox layout techniques; it merely supplies a scalar value.
• During server‑side rendering (window is undefined) the hook will throw unless you guard it.

Common pitfalls to avoid

• Missing ChakraProvider: Without the provider the hook cannot read the theme, so it will return base or error. Always wrap your component tree.
• Passing a non‑object: The hook expects an object; giving an array or primitive causes a runtime error.
• Expecting automatic updates without React re‑render: The hook relies on React’s state; if you memoize the component incorrectly you may see stale values.
• Using the hook outside a function component: Hooks rules apply; calling it in a class component or a plain function will break.
• SSR mismatch: Rendering the hook on the server leads to a different value than on the client, causing hydration warnings. Guard with typeof window !== 'undefined' or use useEffect to set state after mount.

How to verify the behavior

1. Render the ResponsiveBox in a browser.
2. Open DevTools, select the element, and watch its width style change as you resize the window.
3. You should see the width shift from 100px → 200px → 300px → 400px as you cross the sm, md, lg breakpoints defined in the theme.
4. Optionally, log the value inside a useEffect to confirm it matches the breakpoint map at each width.
5. To test the provider dependency, temporarily remove ChakraProvider and observe that the hook reverts to the base value (or throws if you rely on a missing key).