Responsive Design Utilities

Chakra UI provides built-in responsive style props that allow components to adapt to different screen sizes without writing CSS media queries. Responsive values can be applied directly to component props using either array or object syntax.

The responsive array syntax assigns style values in order of Chakra UI breakpoints, starting from the base (smallest) screen size. For example, ["column", "row"] sets a layout to stack vertically on smaller screens and switch to a horizontal layout on larger screens.

The responsive object syntax uses named breakpoints such as base and md to explicitly define when styles change. This syntax improves readability by clearly indicating which styles apply at each breakpoint.

import { Box, Button, Heading, Input, Stack, Text } from "@chakra-ui/react"

export default function App() {
  return (
    <Box
      minH="100vh"
      bg="gray.50"
      color="gray.900"
      display="grid"
      placeItems="center"
      p={{ base: "4", md: "8" }}
    >
      <Box
        bg="white"
        borderWidth="1px"
        borderRadius="xl"
        p={{ base: "4", md: "6" }}
        w="full"
        maxW={{ base: "100%", sm: "420px" }}
      >
        <Stack gap={{ base: "3", md: "4" }}>
          <Heading size={{ base: "sm", md: "md" }}>
            Newsletter
          </Heading>

          <Text fontSize={{ base: "sm", md: "md" }} color="fg.muted">
            Get product updates once a week. No spam.
          </Text>

          <Input placeholder="Email address" size={{ base: "md", md: "lg" }} />

          <Button colorPalette="brand" size={{ base: "md", md: "lg" }}>
            Subscribe
          </Button>
        </Stack>
      </Box>
    </Box>
  )
}