Breakpoints - Chakra Ui

:::info

Please read the overview first to learn how to properly customize the styling engine, and get type safety.

:::

Example

Here's an example of how to customize breakpoints in Chakra UI.

tsx

import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"

const config = defineConfig({
  theme: {
    breakpoints: {
      tablet: "992px",
      desktop: "1200px",
      wide: "1400px",
    },
  },
})

export default createSystem(defaultConfig, config)

Usage

When using responsive properties, reference the new breakpoints.

tsx

<Box fontSize={{ base: "16px", tablet: "18px", desktop: "20px" }}>Hello</Box>