Custom breakpoints are defined in the breakpoints property of your theme.

const config = defineConfig({
  theme: {
    breakpoints: {
      xl: { value: "80em" },
      "2xl": { value: "96em" },
      "3xl": { value: "120em" },
      "4xl": { value: "160em" },
    },
  },
})

export const system = createSystem(defaultConfig, config)

Next, you add the new system to your components/ui/provider.tsx files

"use client"

import { system } from "@/components/theme"
import {
  ColorModeProvider,
  type ColorModeProviderProps,
} from "@/components/ui/color-mode"
import { ChakraProvider } from "@chakra-ui/react"

export function Provider(props: ColorModeProviderProps) {
  return (
    <ChakraProvider value={system}>
      <ColorModeProvider {...props} />
    </ChakraProvider>
  )
}

Next, you run the CLI typegen command to generate the types.

npx chakra typegen ./components/theme.ts

Using the breakpoint

With that in place, you can use the breakpoints when writing responsive styles.

<Box fontSize={{ base: "sm", "4xl": "lg" }}>Hello world</Box>