Responsive Design

Overview

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

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>

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.

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 Zooms In
• Font size Changed in HTML