Creating custom breakpoints - Chakra Ui

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

tsx

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

export const system = createSystem(defaultConfig, config)

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

tsx

"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, run the CLI typegen command to generate the types. See the CLI docs for how to run typegen in postinstall, CI, and monorepos.

bash

npx @chakra-ui/cli typegen ./components/theme.ts

Note: You might need to restart your TypeScript server for the types to be picked up.

Using the breakpoint

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

tsx

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