Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

Breakpoints

Learn how to customize breakpoints in 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.

theme.ts

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.

App.tsx

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

Previous

Overview

Next

Colors