Responsive Design

Learn how to create responsive designs using Chakra UI's built-in responsive style props

Overview

Responsive design is a fundamental aspect of modern web development, allowing websites and applications to adapt seamlessly to different screen sizes and devices.

info

Chakra uses a mobile-first breakpoint system and leverages min-width media queries @media(min-width) when you write responsive styles.

Chakra provides five breakpoints by default:

const breakpoints = {
  base: "0em", // 0px
  sm: "30em", // ~480px
  md: "48em", // ~768px
  lg: "62em", // ~992px
  xl: "80em", // ~1280px
  "2xl": "96em", // ~1536px
}

Object syntax

Here's an example of how to change the font weight of a text on large screens

<Text fontWeight="medium" lg={{ fontWeight: "bold" }}>
  Text
</Text>

or use the prop based modifier

<Text fontWeight={{ base: "medium", lg: "bold" }}>Text</Text>

Array syntax

Chakra also accepts arrays as values for responsive styles. Pass the corresponding value for each breakpoint in the array. Using our previous code as an example:

<Text fontWeight={["medium", undefined, undefined, "bold"]}>Text</Text>

Notice the use of undefined for the breakpoints to skip the md and lg breakpoints.

Breakpoint targeting

Breakpoint range

Chakra provides a way to target a range of breakpoints using the To notation. To apply styles between the md and xl breakpoints, use the mdToXl property:

<Text fontWeight={{ mdToXl: "bold" }}>Text</Text>

This text will only be bold from md to xl breakpoints.

Only breakpoint

To target a single breakpoint, use the Only notation. Here's an example of how to apply styles only in the lg breakpoint, using the lgOnly property:

<Text fontWeight={{ lgOnly: "bold" }}>Text</Text>

Hiding elements at breakpoint

Chakra provides the hideFrom and hideBelow utilities to hide elements at specific breakpoints.

To hide an element from the md breakpoint, use the hideFrom utility:

<Stack hideFrom="md">
  <Text>This text will be hidden from the `md` breakpoint</Text>
</Stack>

To hide an element below the md breakpoint, use the hideBelow utility:

<Stack hideBelow="md">
  <Text>This text will be hidden below the `md` breakpoint</Text>
</Stack>

Customizing Breakpoints

To learn how to customize breakpoints, please refer to the customizing breakpoints section.