Using Chakra UI's Responsive Array Syntax for Clean Breakpoint Styling

The Pain of Repetitive Media Queries

When building a React app with Chakra UI, you often need a component to look different on mobile, tablet, and desktop screens. The traditional way is to write a series of media queries or use the useBreakpointValue hook for each style property. This leads to repetitive code, especially when several props (width, padding, font size) must change at the same breakpoints.

Thesis: Chakra UI’s Array Syntax Simplifies Responsive Styling

Chakra UI lets you pass an array to any style prop, where each entry corresponds to a breakpoint defined in your theme. The framework automatically maps the values to the correct CSS media queries, removing the need to write them manually.

How the Array Syntax Works

Chakra UI’s default theme includes four breakpoints: xs, sm, md, lg. When you provide an array like width={['100%', '50%', '25%', '12.5%']}, the first value applies at xs and up, the second overrides it at sm and up, and so on. Internally, Chakra UI generates CSS similar to:

width: 100%;
@media (min-width: 30em) { width: 50%; }
@media (min-width: 48em) { width: 25%; }
@media (min-width: 62em) { width: 12.5%; }

If the array is shorter than the number of breakpoints, the last value is repeated for the remaining breakpoints.

Worked Example: A Responsive Card Component

Below is a card that changes its width, padding, and font size across the four breakpoints.

import { Card, CardBody, CardHeader, Text } from '@chakra-ui/react';

function ResponsiveCard() {
  return (
    
      
        
          Responsive Card
        
      
      
        
          This card scales its width, margin, padding, and text size as the viewport grows.
        
      
    
  );
}
export default ResponsiveCard;

To verify the behavior:

1. Create a fresh Chakra UI project (e.g., npm create @chakra-ui/app my-app).
2. Add the ResponsiveCard component to a page.
3. Open the app in a browser and resize the window, or use Chrome DevTools’ device toolbar to emulate breakpoints.
4. Inspect the card’s DOM element; you should see inline styles updating with the correct values at each breakpoint.

Trade‑offs and Limitations

The array syntax is concise, but it relies on the theme’s breakpoint order. If you customize breakpoints (adding, removing, or renaming them), you must adjust the array length or provide fallback values; otherwise, unexpected styles may appear. Additionally, the syntax cannot express conditional logic based on props—for example, "show a different width only when isExpanded is true". In those cases, you still need useBreakpointValue or custom CSS.

Actionable Closing

Start by replacing repetitive media queries with array props for simple responsive adjustments like width, padding, or font size. Keep an eye on your theme’s breakpoint definition; if you modify it, review any array props to ensure they still line up. For more complex prop‑driven responsiveness, reach for useBreakpointValue. This approach keeps your JSX tidy while preserving the power of Chakra UI’s responsive system.