Responsive Design

Overview

Chakra UI uses a mobile-first breakpoint system with min-width media queries:

const breakpoints = {
  base: "0rem", // 0px
  sm: "30rem", // ~480px
  md: "48rem", // ~768px
  lg: "62rem", // ~992px
  xl: "80rem", // ~1280px
  "2xl": "96rem", // ~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>

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>

Down breakpoint

To target a breakpoint and below, use the Down notation. This creates clear boundaries for responsive variants. Here's an example of how to apply styles from the sm breakpoint and below:

<Text fontWeight={{ smDown: "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.

Responsive Variants

When applying breakpoints to component variants, we recommend using explicit breakpoints instead of using the base breakpoint.

This way, you can avoid style leaking from one variant to another.

// okay, but can lead to style leaking ⚠️
<Button variant={{ base: "solid", md: "outline" }}>Button</Button>

// good ✅
<Button variant={{ smDown: "solid", md: "outline" }}>Button</Button>

This creates clear boundaries without style accumulation. :::

FAQs

Why are breakpoints converted to rem?

The conversion to rem is intentional and beneficial for accessibility reasons:

• User changed their browser's font setting
• User zoomed in
• Font size changed in HTML