Responsive styling

Most Box style props accept either one value or an object keyed by breakpoint. Responsive objects use a mobile-first cascade.

<Box p={4} />
<Box p={{ base: 2, md: 4, lg: 6 }} />

Breakpoints

Key	Minimum width
base	0px
sm	640px
md	768px
lg	1024px
xl	1280px
2xl	1536px

Mobile-first cascade

A value continues into larger breakpoints until another value replaces it.

<Box p={{ base: 2, lg: 6 }} />

The example resolves to 8px from base through md, then 24px from lg through 2xl.

You can omit base. Before the first declared breakpoint, that prop has no responsive value from the object.

<Box display={{ md: "block" }} />

Responsive Box props

The following Box prop groups accept responsive objects:

Group	Props
Spacing	p, px, py, pt, pr, pb, pl, m, mx, my, mt, mr, mb, ml
Sizing	w, h, minW, maxW, minH, maxH
Layout	display, position, overflow, overflowX, overflowY, zIndex
Flexbox	flexDirection, justifyContent, alignItems, alignContent, alignSelf, flexWrap, flex, gap, gapRow, gapColumn
Grid	gridTemplateColumns, gridTemplateRows, justifySelf
Typography	fontSize, fontFamily, fontWeight, lineHeight
Color	color, bg, borderColor
Border	border, borderTop, borderRight, borderBottom, borderLeft, borderX, borderY, borderStyle
Roundness	rounded, roundedTop, roundedBottom, roundedLeft, roundedRight, roundedTopLeft, roundedTopRight, roundedBottomLeft, roundedBottomRight
Effects	shadow, opacity
Interaction	cursor, pointerEvents, userSelect
Text	textAlign, whiteSpace, textDecoration
Inset	top, right, bottom, left, inset, insetX, insetY

flexGrow, flexShrink, and flexBasis accept only one value. Their Flex aliases, grow, shrink, and basis, also accept only one value.

Responsive layout components

Layout convenience props accept responsive objects:

• Stack: direction, align, justify, wrap, and gap
• HStack and VStack: align, justify, wrap, and gap
• Flex: direction, align, justify, wrap, alignSelf, gap, gapRow, and gapColumn
• Grid: columns, rows, justify, align, justifyContent, alignContent, gap, gapRow, and gapColumn

<Stack
  direction={{ base: "column", md: "row" }}
  align={{ base: "stretch", md: "center" }}
  gap={{ base: 4, lg: 8 }}
>
  <Box>Sidebar</Box>
  <Box>Main content</Box>
</Stack>

<Grid
  columns={{ base: "1fr", md: "repeat(3, 1fr)" }}
  justify={{ base: "center", lg: "start" }}
  gap={4}
>
  <Box>First card</Box>
  <Box>Second card</Box>
  <Box>Third card</Box>
</Grid>

Responsive typography

Text and Heading convenience props do not accept responsive objects. To make typography responsive, use a polymorphic Box with fontSize, fontWeight, or both.

<Box
  as="h2"
  fontSize={{ base: "xl", md: "2xl", lg: "3xl" }}
  fontWeight="bold"
>
  Responsive heading
</Box>

Use Heading when a fixed token size is sufficient and you want its level-to-size mapping.

Responsive state styles

State props accept responsive values for the style props they contain.

<Box
  bg="surface"
  _hover={{
    bg: { base: "primary-subtle", md: "primary-default" },
    color: { base: "primary", md: "foreground-inverted" },
  }}
>
  Hover target
</Box>

See State styling for state selectors and precedence.

Common layouts

Hide an element below md:

<Box display={{ base: "none", md: "block" }}>
  Desktop navigation
</Box>

Change a grid's column count:

<Box
  display="grid"
  gridTemplateColumns={{
    base: "1fr",
    md: "repeat(2, 1fr)",
    lg: "repeat(3, 1fr)",
  }}
  gap={4}
>
  <Box>First card</Box>
  <Box>Second card</Box>
  <Box>Third card</Box>
</Box>

Change a flex direction:

<Box
  display="flex"
  flexDirection={{ base: "column", md: "row" }}
  gap={4}
>
  <Box>First item</Box>
  <Box>Second item</Box>
</Box>